控制SVG元素多條路徑的可見性順序-有解無憂

我正在尋找一種在 html 中顯示帶有圓形虛線邊框的影像的方法，如下例所示

控制SVG元素多條路徑的可見性順序

這樣可以控制破折號的數量及其各自的顏色，可以在 WhatsApp 應用程式狀態選項卡中觀察到類似的示例，其中破折號的數量根據用戶上傳的狀態數量而變化。

現在為了解決我應用以下步驟來生成所需輸出的問題，顯然代碼不是我撰寫的，但我進行了更改

使用等長的相等值在 SVG 中生成一個簡單的 Pi 圖表
根據需要為單個切片著色
在 SVG 元素實際輸出的頂部或幾乎接近輸出結果產生的顯示影像

現在在下面的代碼中，我面臨一個我無法解決的奇怪問題，虛線條的順序與上面的影像不同，例如紫色應該先出現，然后是橙色，然后其余的灰色條到回圈結束，但實際輸出不同。

function pie(data){
  // set size of <svg> element
  $('#' data.$id).attr("width", 2*data.radius);
  $('#' data.$id).attr("height", 2*data.radius);
  // calculate sum of values
  var sum=0;
  var radius=data.radius;
  for(var e=0; e<data.segments.length; e  ){
    sum =data.segments[e].value;
  }
  // generate proportional pie for all segments
  var startAngle=0, endAngle=0;
  for(var i=0; i<data.segments.length; i  ){
    var element=data.segments[i];
    var angle=element.value * 2 * Math.PI / sum;
    endAngle =angle;
    var svgLine=makeSVG('line',{x1: radius, y1: radius, x2: (Math.cos(endAngle)*radius radius), y2: (Math.sin(endAngle)*radius radius), stroke: element.color});    
    $('#' data.$id).append(svgLine);
    var pathStr=
        "M " (radius) "," (radius) " " 
        "L " (Math.cos(startAngle)*radius radius) "," 
             (Math.sin(startAngle)*radius radius) " " 
        "A " (radius) "," (radius) 
             " 0 " (angle<Math.PI?"0":"1") " 1 " 
             (Math.cos(endAngle)*radius radius) "," 
             (Math.sin(endAngle)*radius radius) " " 
        "Z";
    var svgPath=makeSVG('path',{"d": pathStr, "fill": element.color, stroke:"white", "stroke-width": "4" });
    $('#' data.$id).append(svgPath);
    startAngle =angle;
  }
};

function makeSVG(tag, attrs) {
  var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var k in attrs)
    el.setAttribute(k, attrs[k]);
  return el;
} //SVG Maker

var example={ //set parameters for pie chart
  $id: "pie1", //set id of <svg> containning pie
  radius: 56, //set radius of pie
  segments: [
    {value: 1, color: "#7E57F9"},
    {value: 1, color: "#7E57F9"},
    {value: 1, color: "#7E57F9"},
    {value: 1, color: "#7E57F9"},
    {value: 1, color: "#F9A657"},
    {value: 1, color: "#D3D3D3"},
    {value: 1, color: "#D3D3D3"}
  ]
  };
  pie(example);

svg {
  margin-top: -10px;
  margin-left: -10px;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="pie1"></svg>
<img src="https://5.imimg.com/data5/SELLER/Default/2020/8/ND/OY/KF/111699996/country-hen-500x500.jpg" width="100">

uj5u.com熱心網友回復：

最后，我發現，@邁克爾的評論，順序是正確的解決方案，但渲染起點不是從圓的頂部，初始化startAngle和endAngle對Math.PI * 1.5解決問題如更換線

var startAngle=0, endAngle=0;

和

var startAngle=Math.PI * 1.5, endAngle=Math.PI * 1.5;

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

標籤：

上一篇：SVG：多邊形內的路徑

下一篇：SVG交集設定顏色