javascript 如何通过 svg 绘制线性渐变圆？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30147879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a linear gradient circle by svg?
提问by hey_janry
This is my code, but it's not what I wanted.I hope the color distribution is not symmetrical.
这是我的代码，但不是我想要的。我希望颜色分布不是对称的。
<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>
I need an effect like this.
我需要这样的效果。
回答by Jose Ricardo Bustos M.
before check: circle-drawing-with-svgs-arc-path.... my solution is simple: i divided circle into six arcs, each arc with own lineal gradient
检查前：circle-drawing-with-svgs-arc-path....我的解决方案很简单：我将圆分成六个弧，每个弧都有自己的线性渐变
math explanation:
数学解释：
angle = 360 / 6 = 60
Math.sin(Math.PI*60/180)*120 == 103.9230
Math.cos(Math.PI*60/180)*120 == 60.0000
角度 = 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>