如何用2种颜色在SVG中绘制圆圈？

Question

如何在SVG中用2种颜色绘制圆圈？

我找到了以下示例的教程（来自this JSFiddle）：

<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>

但我想只使用2种颜色。我试图让它看起来像这样：

感谢您的帮助！

Answer 1

您实际上可以创建一个只有一条路径的两种颜色的圆圈。只需设置两个不同的stop-color即可。此处，第一个stop-color为#00f（蓝色），而stop-color为#f0f（紫色）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
  <defs>
    <linearGradient id="colour" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="1">
        <stop offset="0%" stop-color="#00f"/>   
        <stop offset="100%" stop-color="#f0f"/>   
    </linearGradient>
  </defs>

  <g fill="none" stroke-width="15" transform="translate(100,120)">
    <path d="M 0 -100 a 50 50 0 1 0 0.00001 0" stroke="url(#colour)"/>
  </g>
</svg>

我还创建了一个这个here的JSFiddle。

随意使用viewBox和transform以适应所需的输出位置：）

希望这有帮助！