svg多颜色在圆的冲程 [英] svg multiple color on circle stroke

问题描述

我要建立一个彩虹圆

，如下图所示：

http://i.imgur.com/kK2X3xf.png

但如何我绘制曲线和多个颜色停止渐变？

这里是我当前的代码：

 < svg width =500height =500xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999 / xlink> 
< defs> 
< linearGradient id =test> 
< stop offset =0％stop-color =＃f00/> 
< stop offset =100％stop-color =＃0ff/> 
< / linearGradient> 
 
< / defs> 
 
< circle cx =50cy =50r =40fill =nonestroke =url（#test）stroke-width =6/> 
 
< / svg> 
  

解决方案

SVG没有锥形梯度。要模拟效果，你必须使用大量的小线段来伪造效果。

这里是一个例子。我用六条路径近似360度的色相。每个路径包含覆盖60deg圆的弧。我使用线性渐变来内插从每个路径的开始到结束的颜色。这不是完美的（你可以看到一些不连续的coloursmeet），但它可能愚弄大多数人。

 < svg xmlns =http://www.w3.org/2000 / svgversion =1.1width =100％height =100％viewBox = -  10 -10 220 220> < defs> < linearGradient id =redyelgradientUnits =objectBoundingBoxx1 =0y1 =0x2 =1y2 =1> < stop offset =0％stop-color =＃ff0000/> < stop offset =100％stop-color =＃ffff00/> < / linearGradient> < linearGradient id =yelgregradientUnits =objectBoundingBoxx1 =0y1 =0x2 =0y2 =1> < stop offset =0％stop-color =＃ffff00/> < stop offset =100％stop-color =＃00ff00/> < / linearGradient> < linearGradient id =grecyagradientUnits =objectBoundingBoxx1 =1y1 =0x2 =0y2 =1> < stop offset =0％stop-color =＃00ff00/> < stop offset =100％stop-color =＃00ffff/> < / linearGradient> < linearGradient id =cyablugradientUnits =objectBoundingBoxx1 =1y1 =1x2 =0y2 =0 < stop offset =0％stop-color =＃00ffff/> < stop offset =100％stop-color =＃0000ff/> < / linearGradient> < linearGradient id =blumaggradientUnits =objectBoundingBoxx1 =0y1 =1x2 =0y2 =0 < stop offset =0％stop-color =＃0000ff/> < stop offset =100％stop-color =＃ff00ff/> < / linearGradient> < linearGradient id =magredgradientUnits =objectBoundingBoxx1 =0y1 =1x2 =1y2 =0 < stop offset =0％stop-color =＃ff00ff/> < stop offset =100％stop-color =＃ff0000/> < / linearGradient> < / defs> < g fill =nonestroke-width =15transform =translate（100,100）> < path d =M 0，-100 A 100,100 0 0,1 86.6，-50stroke =url（#redyel）/> < path d =M 86.6，-50 A 100,100 0 0,1 86.6,50stroke =url（#yelgre）/> < path d =M 86.6,50 A 100,100 0 0,1 0,100stroke =url（#grecya）/> < path d =M 0,100 A 100,100 0 0,1 -86.6,50stroke =url（#cyablu）/> < path d =M -86.6,50 A 100,100 0 0,1 -86.6，-50stroke =url（#blumag）/> < path d =M -86.6，-50 A 100,100 0 0,1 0，-100stroke =url（#magred）/> < / g> < / svg>  

http://jsfiddle.net/Weytu/\">http://jsfiddle.net/Weytu/

更新2：

对于那些想要超过六个段的人来说，这里有一些javascript，可以生成一个你想要的任意数量的段。

 < svg id = colourwheelxmlns =http://www.w3.org/2000/svgversion =1.1width =100％height =100％viewBox = -  10 -10 220 220> < defs id =defs> < / defs> < g id =pathsfill =nonestroke-width =15transform =translate（100,100）> < / g>< / svg>  

i want to create a rainbow circle

like the picture below:

http://i.imgur.com/kK2X3xf.png

but how can i draw the curved and multiple color stop gradient?

here's my current code:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="test">
<stop offset="0%" stop-color="#f00"/>
<stop offset="100%" stop-color="#0ff"/>
</linearGradient>

</defs>

<circle cx="50" cy="50" r="40" fill="none" stroke="url(#test)" stroke-width="6"/>

</svg>

解决方案

This approach won't work. SVG doesn't have conical gradients. To simulate the effect, you would have to fake it with a large number of small line segments. Or some similar technique.

Update:

Here is an example. I approximate the 360deg of hue with six paths. Each path contains an arc which covers 60deg of the circle. I use a linear gradient to interpolate the colour from the start to the end of each path. It's not perfect (you can see some discontinuities where the coloursmeet ) but it would possibly fool most people. You could increase the accuracy by using more than six segments.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
      <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000"/>   
            <stop offset="100%" stop-color="#ffff00"/>   
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00"/>   
            <stop offset="100%" stop-color="#00ff00"/>   
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00"/>   
            <stop offset="100%" stop-color="#00ffff"/>   
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff"/>   
            <stop offset="100%" stop-color="#0000ff"/>   
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff"/>   
            <stop offset="100%" stop-color="#ff00ff"/>   
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff"/>   
            <stop offset="100%" stop-color="#ff0000"/>   
        </linearGradient>
      </defs>
    
      <g fill="none" stroke-width="15" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
      </g>
    </svg>

Fiddle here: http://jsfiddle.net/Weytu/

Update 2:

For those that want more than six segments, here is some javascript that will produce a wheel with any number of segments that you wish.

function makeColourWheel(numSegments)
{
    if (numSegments <= 0)
        numSegments = 6;
    if (numSegments > 360)
        numSegments = 360;

    var  svgns = xmlns="http://www.w3.org/2000/svg";
    var  svg = document.getElementById("colourwheel");
    var  defs = svg.getElementById("defs");
    var  paths = svg.getElementById("paths");

    var  radius = 100;
    var  stepAngle = 2 * Math.PI / numSegments;

    var  lastX = 0;
    var  lastY = -radius;
    var  lastAngle = 0;
    
    for (var i=1; i<=numSegments; i++)
    {
        var  angle = i * stepAngle;

        // Calculate this arc end point
        var x = radius * Math.sin(angle);
        var y = -radius * Math.cos(angle);
        // Create a path element
        var arc = document.createElementNS(svgns, "path");
        arc.setAttribute("d", "M " + lastX.toFixed(3) + "," + lastY.toFixed(3)
                              + " A 100,100 0 0,1 " + x.toFixed(3) + "," + y.toFixed(3));
        arc.setAttribute("stroke", "url(#wheelseg" + i + ")");
        // Append it to our SVG
        paths.appendChild(arc);
        
        // Create a gradient for this segment
        var grad = document.createElementNS(svgns, "linearGradient");
        grad.setAttribute("id", "wheelseg"+i);
        grad.setAttribute("gradientUnits", "userSpaceOnUse");
        grad.setAttribute("x1", lastX.toFixed(3));
        grad.setAttribute("y1", lastY.toFixed(3));
        grad.setAttribute("x2", x.toFixed(3));
        grad.setAttribute("y2", y.toFixed(3));
        // Make the 0% stop for this gradient
        var stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "0%");
        hue = Math.round(lastAngle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        // Make the 100% stop for this gradient
        stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "100%");
        hue = Math.round(angle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        // Add the gradient to the SVG
        defs.appendChild(grad);

        // Update lastx/y
        lastX = x;
        lastY = y;
        lastAngle = angle;
    }
}


makeColourWheel(60);

<svg id="colourwheel" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
  <defs id="defs">
  </defs>

  <g id="paths" fill="none" stroke-width="15" transform="translate(100,100)">
  </g>
</svg>

这篇关于svg多颜色在圆的冲程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！