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
SVG elements embedded in web pages are treated the same as any other element, so you only need to use CSS to achieve:
I solved this problem using SVG pattern -> http://jsfiddle.net/k5527kym/