javascript - 如何通过svg绘制线性渐变圆圈？

<分区>

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

<svg width="300" height="300">
    <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-width="4" fill="none" stroke="url(#linearColors)"></circle>
</svg>

enter image description here

我需要这样的效果。

enter image description here

最佳答案

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

数学解释:

angle = 360 / 6 = 60

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

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

<svg width="300" height="300">
    <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-width="5" />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke-width="5" />
  <path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearColors3)" stroke-width="5" />
  <path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearColors4)" stroke-width="5" />
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke-width="5" />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke-width="5" />
</svg>

关于javascript - 如何通过svg绘制线性渐变圆圈？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30147879/

上一篇：javascript - 如何动画列表？

下一篇：java - 从字节数组设置 img src

相关文章：

html - 具有相对高度的父div中具有相对高度的子div

html - 强制 div 到下一行

html - 如何使用 CSS 调整 100% 浏览器高度和宽度？

javascript - Angular firebase 不显示 key

javascript - 使用 onkeyup 事件确保电子邮件匹配

javascript - javascript对象方法如何引用尚未声明的变量？

php - 在数据库上设置小数点但仍然只读取整数

jquery - 放大和淡出效果

css - 在 asp 向导上更改事件步骤标题颜色

javascript - 如何将选中的复选框一次限制为一个？