CSS radial gradient to SVG radial gradient
P粉308783585
P粉308783585 2023-12-11 15:54:09
0
2
589

Is it possible to make a radial gradient in SVG, like in CSS http://codepen.io/A973C/pen/hnEaf (I mean the lights in the traffic light)

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 15px 15px; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  border: dotted 2px red;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px red;
}

My SVG gradient looks like this http://jsfiddle.net/x9a2Lyx1/ I really don't understand how to repeat the gradient like in the css example

P粉308783585
P粉308783585

reply all(2)
P粉604669414

SVG elements embedded in web pages are treated the same as any other element, so you only need to use CSS to achieve:

svg {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 3px 3px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: dotted 2px lime;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px lime;
}
<svg width="120" height="120" 
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">       
</svg>
P粉617237727

I solved this problem using SVG pattern -> http://jsfiddle.net/k5527kym/

<pattern id="muster_c" patternUnits="userSpaceOnUse" width="2" height="2" x="0" y="0">
        <circle cx="1" cy="1" r="2" fill="url(#MyGradient)"/>
</pattern>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template