分段SVG輪廓圓

在此先感謝您的幫助！

我正在嘗試構建一個沒有填充只有輪廓并分為 3 段的 SVG 圓圈。

我設法找到了一個執行緒，向我展示了如何將一個圓分成 4 段（見代碼片段），但我對 SVG 很陌生，所以我真的不知道發生了什么以及如何將它分成 3 段，而且只有大綱。

我附上了一個顯示圓圈結果的螢屏截圖。我不想要任何可見的片段標志，但我希望能夠單獨使用每個片段。（基本上我會有一個頁面，當您向下滾動頁面時，圓圈會自行完成。）

        <svg width="200" height="200" viewBox="0 0 200 200">
          <g transform="translate(100,100)" stroke="#000" stroke-width="2">
            <path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="none"/>
            <path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="none"/>
            <path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="none"/>
            <path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="none"/>
          </g>
        </svg>

uj5u.com熱心網友回復：

而不是所有的數學，讓一個本地 Web 組件<svg-segments>來完成這項作業。創建的SVG中
的重要部分是和值<path>pathLengthstroke-dasharray

您所指定的只是一串顏色，用于定義繪制的顏色段數和顏色段。
無顏色將創建一個空段：

<svg-segments parts="red,,blue"></svg-segments>

在下面的 SO 片段中；單擊圓圈以添加更多細分

<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:grey">
  <svg-segments parts="red,green,blue"></svg-segments>
  <svg-segments parts="red,,blue"></svg-segments>
  <svg-segments parts=",,red"></svg-segments>
  <svg-segments parts="red,green,blue,purple" width="5"></svg-segments>
  <svg-segments parts="red,,,green,,blue,,red,red" width="50"></svg-segments>
</div>
<script>
  customElements.define("svg-segments", class extends HTMLElement {
    static get observedAttributes() {
      return ["parts", "size"]; // svg is redrawn at *every* attribute update!
    }
    attributeChangedCallback() {
      this.parts = this.getAttribute("parts").split(",");
      let vb = 200; // viewPort size; might need to tweak this
      let width = this.getAttribute("width") || 25; // stroke-width
      let a = vb / 2 - width/2; // calculate circle arcs
      let b = vb - width;
      this.innerHTML = `<svg viewBox='0 0 ${vb} ${vb}'>`  
        this.parts.map((col, idx) => {
          if (col)
            return `<path d='M${width/2},${vb/2}a${a},${a} 0 1,0 ${b},0a${a},${a} 0 1,0 -${b},0' 
            fill='none' stroke-width='${width}' pathLength='${this.parts.length}'
            stroke='${col}' stroke-dashoffset='${idx}'
            stroke-dasharray='1 ${this.parts.length-1}'/>`;
          else return ``;
        })   `</svg>`;
    }
    connectedCallback() {// for StackOverflow Snippet demo purpose only
      this.onclick = (evt) => { 
        let moreparts = this.parts.join(",")   ",red";
        this.setAttribute("parts", moreparts);
      }
    }
  })
</script>

SVG 有一些計算路徑弧的怪癖，當您看到工件（紅色）時，您可能需要將視口尺寸調整到更高的尺寸：

或重新考慮使用<circle>

uj5u.com熱心網友回復：

您需要計算每條弧線的起點和終點。由于您想要 3 個圓弧，因此使用的角度是圓的 1/3，即 2*Math.PI/3。

請閱讀代碼中的注釋。

//the circle's radius
let r = 70;
//points used for the start and end of every arc
let points =[];
//the paths
let ps = document.querySelectorAll("path");

//calculating the points used for the start and end of every arc
for(let angle = -Math.PI/2; angle < 2*Math.PI; angle  = 2*Math.PI/3 ){
  let point = {}
  point.x = r * Math.cos(angle);
  point.y = r * Math.sin(angle);
  points.push(point)
}

//defining the valueof the d attribute of every path as an arc with the given radius, starting at the previous point and ending at the actual point
for(let i = 0,l=points.length; i<l-1; i  ){
  let point = points[i 1];
  let prev = points[i]
  let d = `M${prev.x},${prev.y} A${r},${r},0,0,1,${point.x},${point.y}`
  //setting the d attribute
  ps[i].setAttribute("d",d);
}

svg{border:solid}

<svg viewBox="-100 -100 200 200" width="300" fill="none" stroke-width="20">
  <path stroke="gold"/>
  <path stroke="skyBlue"/>
  <path stroke="tomato"/>
</svg>

標籤：html css svg 几何学

上一篇：用許多資料點繪制散點圖會產生模糊的svg

下一篇：const關鍵字：可改不可改？