SVG：如何将圆分成 12 个等份

Question

我最近一直在尝试 SVG，更具体地说是创建一个 12 部分的轮子。我在上一篇文章中遇到了一个代码片段，它符合我的需求，但由 6 部分组成，我需要 12 段。我的问题是我无法理解分割的过程。

下面是我试图更好地理解的片段，希望能得到一些关于它如何工作的解释或提示，或者提供一些关于如何优化它的见解（添加 6 个片段）。

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a>
  <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
</svg>

Answer 1

将每个

d-path

值粘贴到 https://yqnn.github.io/svg-path-editor/# 中以查看它们绘制的内容。

使用图书馆最简单

如果只是绘制 12 个段，您可以使用本机 JavaScript 999 字节

<pie-chart>

我写的 Web 组件：https://pie-meister.github.io/

<script src="https://pie-meister.github.io/PieMeister.min.js"></script>

<pie-chart stroke-width="200" pull="-85" stroke="red,gold,blue,red,gold,blue,red,gold,blue,red,gold,blue">
    <style>
      text {
        font-size: 4em;
        text-anchor: middle;
      }
      [part="slice2"] text{
        fill:gold;
        font-size: 6em;
        font-weight:bold;
      }
    </style>
    <slice size="30">1</slice>
    <slice size="30">2</slice>
    <slice size="30" pull="40">3</slice>
    <slice size="30">4</slice>
    <slice size="30">5</slice>
    <slice size="30">6</slice>
    <slice size="30">7</slice>
    <slice size="30">8</slice>
    <slice size="30">9</slice>
    <slice size="30">10</slice>
    <slice size="30">11</slice>
    <slice size="30">12</slice>
  </pie-chart>

绘制自己的圆圈

您可以使用

pathLength

和

strok-dasharray

绘制自己的圆段

定位标签需要一些额外的数学知识

svg {
  height:180px; background:pink
}

<svg-circle segments="12" width="100"></svg-circle>
<svg-circle segments="3" width="100"></svg-circle>
<svg-circle segments="18" width="100"></svg-circle>

<script>
  customElements.define("svg-circle", class extends HTMLElement {
    connectedCallback() {
        let colors = (this.getAttribute("colors")||"red,yellow,blue").split(",");
      let width = this.getAttribute("width") || 20;
      let r = 40;
      let segments = ~~(this.getAttribute("segments") || 1);
      let circles = Array(segments).fill(0).map((_,idx) => {
          let stroke = colors.pop();
          colors.unshift(stroke);
          let circle = `<circle cx="50%" cy="50%" r="${r}%" fill="none"` +
          ` stroke="${stroke}" stroke-width="${width}"` +
          ` stroke-dashoffset="${idx}"` +
          ` stroke-dasharray="1 ${segments-1}" pathLength="${segments}"/>`
          return circle;
        }).join("");
      let svg = `<svg viewBox="0 0 600 600">` + circles + `</svg>`;
      this.innerHTML = svg;
    }
  });
</script>