时间戳

首页 > 解决方案 > 带有渐变的 SVG 圆形颜色

javascript - 带有渐变的 SVG 圆形颜色

问题描述

我想使用 svg 来绘制圆形颜色，如下图所示。我尝试了很多方法，但没有完美的结果。任何人都有解决方案。我应该使用像 d3js 这样的 javascript 库吗 谢谢

圆圈颜色

标签： javascriptanimationd3.jssvgradial-gradients

解决方案

像这样的东西？

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>

推荐阅读