Question

我想使用svg绘制圆形颜色，如下图所示。我尝试了很多方法，但没有取得理想的结果。任何人都有解决方案。我应该使用d3js之类的JavaScript库吗谢谢

Answer 1

像这样吗？

svg {
  background-color: black;
}

<svg width="400" height="400">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="7"/>
    </filter>
  </defs>
  <g filter="url(#blur)">
    <circle cx="200" cy="210" r="170" fill="#f00"/>
    <circle cx="180" cy="180" r="150" fill="#00f"/>
    <circle cx="170" cy="210" r="140" fill="#f0f"/>
    <circle cx="240" cy="220" r="130" fill="#00f"/>
    <circle cx="240" cy="180" r="130" fill="#0ff"/>
    <circle cx="240" cy="240" r="120" fill="#ff0"/>

    <circle cx="200" cy="200" r="150" fill="#fff"/>
  </g>
</svg>

SVG圆形渐变色

1 个答案: