在 SVG 中旋转圆弧答案

【问题标题】：Rotate arc in SVG在 SVG 中旋转圆弧
【发布时间】：2021-02-01 17:46:42
【问题描述】：

我想用 SVG 标签画一个圆环图。我画了每一张图。我使用带有属性的路径：stroke-dasharray。但这并不是绝对正确的。我想使用属性 transform="translate and rotate" 来旋转图形的各个部分。请帮我！谢谢。

    <path 
    d="M 100 100 0 a 10 10 0 0 1 0 20 a 10 10 0 0 1 0 -20" 
    stroke-linecap="butt" 
    stroke="arrayColor[i]" 
    stroke-width="10"
    stroke-dasharray= "C * i / 5,  C" 
    />

【问题讨论】：

标签： javascript svg

【解决方案1】：

与其绘制一个完整的圆并用stroke-dasharray 将其剪辑到一个圆段，不如先绘制圆段？

一个实用函数，用于生成圆段的路径和一些代码，展示如何使用它来构建整个甜甜圈。

function roundNumbersToSomethingReasonable(strings) {
  return strings.reduce((acc, str, i) => acc + Math.round(arguments[i] * 1000) / 1000 + str.replace(/\s+/g, " "));
}

function circleSegment(x, y, radius, inner = 0, startAngle = 0, endAngle = 360) {
  startAngle *= Math.PI / 180;
  endAngle *= Math.PI / 180;
  inner = Math.max(inner, 0);

  const s0 = Math.sin(startAngle),
    c0 = Math.cos(startAngle),
    s1 = Math.sin(endAngle),
    c1 = Math.cos(endAngle),
    largeArc = +(Math.abs(endAngle - startAngle) > Math.PI),
    sweep = +(endAngle > startAngle);

  return inner ?
    roundNumbersToSomethingReasonable`M${x + c0 * radius} ${y + s0 * radius}
      A${radius} ${radius} 0 ${largeArc} ${sweep} ${x + c1 * radius} ${y + s1 * radius}
      L${x + c1 * inner} ${y + s1 * inner}
      A${inner} ${inner} 0 ${largeArc} ${1^sweep} ${x + c0 * inner} ${y + s0 * inner}
      z` :

    roundNumbersToSomethingReasonable`M${x + c0 * radius} ${y + s0 * radius}
      A${radius} ${radius} 0 ${largeArc} ${sweep} ${x + c1 * radius} ${y + s1 * radius}
      L${x} ${y}
      z`;
}

const data = [{
    value: 30,
    color: "red"
  },
  {
    value: 10,
    color: "green"
  },
  {
    value: 17,
    color: "blue"
  }
];

const total = data.reduce((total, item) => total + item.value, 0);
let angle = -90;

this.foo.innerHTML = data.map(item => `<path fill="${item.color}" d="${circleSegment(0, 0, 50, 30, angle, angle += item.value / total * 360)}" />`)
  .join("\n");

&lt;svg id="foo" viewBox="-50 -50 100 100"&gt;&lt;/svg&gt;

我知道这不是您提出的问题，而是 imo。更好地解决您的问题。

【讨论】：