SVG使用javascript在圓圈中繪制1度弧-有解無憂

我使用 Javascript 創建了一個 SVG 圓，并且必須在圓內繪制 1 度的中心線弧。

我正在努力計算度數并回圈以根據影像創建填充的弧線，但每個弧度為 1 度并填充圓

這是我到目前為止所做的

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var svgwidth=550, svgheight=550;
    var width = 500, height = 500;
    var x = width/2;
    var y = width/2;
    var r = width/2-10;
    svg.setAttribute("width", svgwidth);
    svg.setAttribute("height", svgheight);
    // create a circle
    const circle = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle",
    );
    circle.setAttributeNS(null, "cx", x);
    circle.setAttributeNS(null, "cy", y);
    circle.setAttributeNS(null, "r",  r);
    circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 4px;' );
    svg.appendChild(circle);
    
    //Arcs
    var degree = 1;
    var totalArcs = 360;
    var middlePointX = width/2;
    var middlePointY = width/2;
    
    var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
    newLine.setAttribute('id','line2');
    newLine.setAttribute('x1', middlePointX);
    newLine.setAttribute('y1',middlePointY);
    newLine.setAttribute('x2',100);
    newLine.setAttribute('y2',100);
    newLine.setAttribute("stroke", "black")
    svg.append(newLine);
    
    document.getElementById("div1").appendChild(svg);

<div id="div1">

</div>

SVG使用javascript在圓圈中繪制1度弧

請幫忙

uj5u.com熱心網友回復：

無需計算。

關鍵是pathLength=360在a上設定<circle>，然后畫一個1/360 stroke-dashoffset
繪制每個<circle>atstroke-dashoffset=N以繪制 N 個圓段
將其定義為原生Web 組件 <svg-slices>（在所有現代瀏覽器中都支持）
并且您撰寫的所有內容都是 HTML：

    <svg-slices></svg-slices>
    <svg-slices slices="100"></svg-slices>
    <svg-slices slices="360"></svg-slices>

SVG使用javascript在圓圈中繪制1度弧

<style>
  svg-slices {
    width: 180px
  }
</style>

<svg-slices></svg-slices>
<svg-slices slices="100"></svg-slices>
<svg-slices slices="360"></svg-slices>

<script>
  customElements.define("svg-slices", class extends HTMLElement {
    connectedCallback() {
      this.style.display = "inline-block";

      let colors = ["green", "gold","red", "blue", "magenta"];
      let length = this.getAttribute("slices") || colors.length;

      let slice = ( idx , color = colors.shift() ) => {
        colors.push(color); // cycle colors
        return `<circle stroke="${color}"      stroke-dashoffset="${idx}" 
                        pathLength="${length}" stroke-dasharray="1 ${length-1}" 
                 cx="50%" cy="50%" r="25%" fill="none" stroke-width="50%"/>`;
      };
      
      let slices = Array.from({length}, (el, idx) => slice(idx)).join("");
      
      this.innerHTML = `<svg viewBox="0,0,9999,9999">${slices}</svg>`
    }
  });
</script>

<svg-slices>請注意，與庫不同， JS 代碼何時定義并不重要。任何現有或未來添加（但尚未處理）<svg-slices>將自動升級。
如果您正在繪制餅圖，請參閱：https ://dev.to/dannyengelman/what-web-technologies-are-required-to-draw-a-pie-chart-in-2021-spoiler-alert-a-標準網路組件將做 1j56

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/523039.html

標籤：javascriptsvg几何学

上一篇：資料框中的字典值

下一篇：移動設備中2行上的SVG文本違反了規則