是否可以在 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 示例中那样重复渐变
嵌入网页中的 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>我使用 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>