如何通过svg绘制线性渐变圆？ [英] How to draw a linear gradient circle by svg?

问题描述

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

  svg width =300height =300> 
< linearGradient id =linearColorsx1 =0y1 =0x2 =1y2 =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 =120cx =150cy =150class =external-circlestroke-width =4fill =nonestroke =url（#linearColors） >< / circle> 
< / svg> 
  

我需要这样的效果。

解决方案

检查前： 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 =300height =300> < linearGradient id =linearColors1x1 =0y1 =0x2 =1y2 =1> < stop offset =0％stop-color =＃01E400>< / stop> < stop offset =100％stop-color =＃FEFF01>< / stop> < / linearGradient> < linearGradient id =linearColors2x1 =0.5y1 =0x2 =0.5y2 =1 < stop offset =0％stop-color =＃FEFF01>< / stop> < stop offset =100％stop-color =＃FF7E00>< / stop> < / linearGradient> < linearGradient id =linearColors3x1 =1y1 =0x2 =0y2 =1> < stop offset =0％stop-color =＃FF7E00>< / stop> < stop offset =100％stop-color =＃FB0300>< / stop> < / linearGradient> < linearGradient id =linearColors4x1 =1y1 =1x2 =0y2 =0 < stop offset =0％stop-color =＃FB0300>< / stop> < stop offset =100％stop-color =＃9B004A>< / stop> < / linearGradient> < linearGradient id =linearColors5x1 =0.5y1 =1x2 =0.5y2 =0 < stop offset =0％stop-color =＃9B004A>< / stop> < stop offset =100％stop-color =＃7D0022>< / stop> < / linearGradient> < linearGradient id =linearColors6x1 =0y1 =1x2 =1y2 =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 60fill =nonestroke =url（＃linearColors1）stroke-width =5/> < path d =M253.9230 70 a120 120 0 0 1 0 120fill =nonestroke =url（＃linearColors2）stroke-width =5/> < path d =M253.9230 190 a120 120 0 0 1 -103.9230 60fill =nonestroke =url（＃linearColors3）stroke-width =5/> < path d =M150 250 a120 120 0 0 1 -103.9230 -60fill =nonestroke =url（＃linearColors4）stroke-width =5/> < path d =M46.077 190 a120 120 0 0 1 0 -120fill =nonestroke =url（＃linearColors5）stroke-width =5/> < path d =M46.077 70 a120 120 0 0 1 103.9230 -60fill =nonestroke =url（＃linearColors6）stroke-width =5/>< / svg> code> 

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.

解决方案

before check: circle-drawing-with-svgs-arc-path .... my solution is simple: i divided circle into six arcs, each arc with own lineal gradient

math explanation:

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>

这篇关于如何通过svg绘制线性渐变圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！