html - 制作更大的 svg 圈

Question

我有一个 svg 圈的例子。但我不知道如何使它的半径更大。我需要这个例子，因为里面有边界渐变和透明。我不需要六个部分，我需要 12 个部分。请问有人可以帮我吗？

<div style="text-align:center">
  <svg style="margin-top: 100px" 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="20" />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke-width="20" />
  <path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearColors3)" stroke-width="20" />
  <path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearColors4)" stroke-width="20" />
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke-width="20" />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke-width="20" />
</svg>
</div>

Answer 1

这就是我使用 svg 的方式:我正在创建一个代表圆的第 12 部分的弧。接下来，我每次使用不同的渐变渐变来使用弧线 12 次。

为了制作更大的圆圈，您可以更改 svg 元素的宽度或在 javascript 中更改 r .

粗略的你必须为弧 7 到 11 写出你想要的梯度

const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let r = 120;
let n = 12;
let a = 360/n;
let arad = 2*Math.PI/n
let points = []
let p1={
    x:r*Math.cos(0),
    y:r*Math.sin(0)
}
let p2={
    x:r*Math.cos(arad),
    y:r*Math.sin(arad)
}

  let path = document.createElementNS(SVG_NS, 'path');
  let d = `M${p1.x},${p1.y}A${r},${r} 0 0 1 ${p2.x},${p2.y}`;
  path.setAttributeNS(null,"d",d);
  path.setAttribute("id","thepath");
  theDefs.appendChild(path);

for(let i=0; i<n; i++){
  let use = document.createElementNS(SVG_NS, 'use');
  use.setAttributeNS(SVG_XLINK, 'xlink:href', '#thepath');
  use.setAttribute("stroke",`url(#linearColors${i})`)
  use.setAttribute("transform",`rotate(${a*i})`);
  svg.appendChild(use);
}

use{stroke-width:20px;}

<svg id="svg" style="margin-top: 100px" viewBox="-150 -150 300 300" width="300">
<defs id="theDefs">
<linearGradient id="linearColors0" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors1" x1="0.5" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors2" 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="linearColors3" x1="1" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors4" x1="0.5" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors5" x1="0" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
<linearGradient id="linearColors6" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors7" x1="0.5" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors8" 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="linearColors9" x1="1" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors10" x1="0.5" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors11" x1="0" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
</defs>
</svg>