如何通过svg绘制线性渐变圆？ [复制]

Posted 2023-02-22

【中文标题】如何通过svg绘制线性渐变圆？ [复制]

【英文标题】：How to draw a linear gradient circle by svg? [duplicate]

【发布时间】：2015-07-20 18:56:31

【问题描述】：

这是我的代码，但不是我想要的。我希望颜色分布不是对称的。

<svg  >
    <linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
       <stop offset="5%" stop-color="#01E400"></stop>
       <stop offset="25%" stop-color="#FEFF01"></stop>
       <stop offset="40%" stop-color="#FF7E00"></stop>
       <stop offset="60%" stop-color="#FB0300"></stop>
       <stop offset="80%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
   <circle r="120" cx="150" cy="150" class="external-circle" stroke- fill="none" stroke="url(#linearColors)"></circle>
</svg>

我需要这样的效果。

【问题讨论】：

请注意，您的百分比值也不是对称的！不应该是0、20、40、60、80、100吗？

你想要达到什么样的分布，究竟是什么？ x1,y1 是左上角，x2,y2 是右下角，颜色与我看到的正确匹配。您没有机会使用radialGradient，是吗？

@SteveHynding 你可以看到我刚刚上传了一张图片

@Kaiido 我用弧线解决了问题

【参考方案1】：

检查前：circle-drawing-with-svgs-arc-path ....我的解决方案很简单：我将圆分成六个弧，每个弧都有自己的线性渐变

数学解释：

角度 = 360 / 6 = 60

Math.sin(Math.PI*60/180)*120 == 103.9230

Math.cos(Math.PI*60/180)*120 == 60.0000

<svg  >
    <linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#01E400"></stop>
       <stop offset="100%" stop-color="#FEFF01"></stop>
    </linearGradient>
    <linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
       <stop offset="0%" stop-color="#FEFF01"></stop>
       <stop offset="100%" stop-color="#FF7E00"></stop>
    </linearGradient>
    <linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#FF7E00"></stop>
       <stop offset="100%" stop-color="#FB0300"></stop>
    </linearGradient>
    <linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
       <stop offset="0%" stop-color="#FB0300"></stop>
       <stop offset="100%" stop-color="#9B004A"></stop>
    </linearGradient>
    <linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
       <stop offset="0%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
    <linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
       <stop offset="0%" stop-color="#7D0022"></stop>
       <stop offset="100%" stop-color="#01E400"></stop>
    </linearGradient>
   <path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearColors1)" stroke- />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke- />
  <path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearColors3)" stroke- />
  <path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearColors4)" stroke- />
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke- />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke- />
</svg>

【讨论】：

可以用d3.js解决这个问题吗？

我不知道如何使用d3.js，.....但是当然这可以用d3.js ....