CSS径向渐变到SVG径向渐变答案

【问题标题】：CSS radial gradient to SVG radial gradientCSS径向渐变到SVG径向渐变
【发布时间】：2015-02-03 07:27:48
【问题描述】：

是否可以像在 CSS http://codepen.io/A973C/pen/hnEaf 中一样在 SVG 中制作径向渐变（我的意思是交通灯中的灯）

.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 示例中那样重复渐变

【问题讨论】：

标签： css svg radial-gradients

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：