CSS径向渐变到SVG径向渐变(CSS radial gradient to SVG radial

是有可能使在SVG的径向渐变像它在这里CSS http://codepen.io/A973C/pen/hnEaf （我指的是在交通灯的灯光）

.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;
}

我的SVG梯度看起来像这样http://jsfiddle.net/x9a2Lyx1/我真的不明白我怎么可以重复进行梯度喜欢它的CSS例子

Answer 1:

香港专业教育学院解决了这个使用SVG模式- > 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>

Answer 2:

嵌入在网页中的SVG元素被视为与任何其他元素，所以你可以只使用CSS来做到这一点：

 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> 

文章来源: CSS radial gradient to SVG radial gradient