從底部中心向順時針方向畫一個圓圈百分比

我有一個 SVG 元素，如下圖所示。如果我希望黑圈路徑從第二張影像中顯示的下部中間開始，則需要哪些值。

svg{
width: 45px;
}
  
   .circle-bg {
    fill: none;
    stroke: #dddddd;
    stroke-width: 4;
  }

  .circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: green;
  }

<svg viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
      <path class="circle"
    stroke-dasharray="60, 100"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
    </svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
      <path class="circle"
    stroke-dasharray="30, 100"
    d="M18 33
      a 15.9155 15.9155 0 0 0 0 31.831
      a 15.9155 15.9155 0 0 0 0 -31.831"
  />
    </svg>

uj5u.com熱心網友回復：

只需將圓圈旋轉到您希望它開始的任何位置。

svg{
width: 45px;
}
  
   .circle-bg {
    fill: none;
    stroke: #dddddd;
    stroke-width: 4;
  }

  .circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: green;
    transform: rotate(180deg);
    transform-origin: center;
    transform-box: fill-box;
  }

<svg viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
      <path class="circle"
    stroke-dasharray="60, 100"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
    </svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
      <path class="circle"
    stroke-dasharray="20, 140"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
    </svg>

uj5u.com熱心網友回復：

您可以將 替換<path>為<circle>。圓也可以旋轉，并具有與pathLength路徑一樣的屬性。

svg {
  width: 45px;
}

.circle-bg {
  fill: none;
  stroke: #dddddd;
  stroke-width: 4;
}

.circle {
  fill: none;
  stroke-width: 4;
  stroke: green;
  transform: rotate(-90deg);
  transform-origin: center;
}

text {
  font-size: 10px;
  font-family: sans-serif;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}

<svg viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="16" class="circle-bg" />
  <circle cx="18" cy="18" r="16" class="circle"
    pathLength="100" stroke-dasharray="60 100"/>
  <text x="18" y="18">60%</text>
</svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="16" class="circle-bg" />
  <circle cx="18" cy="18" r="16" class="circle"
    pathLength="100" stroke-dasharray="30 100"/>
  <text x="18" y="18">30%</text>
</svg>

uj5u.com熱心網友回復：

構建您自己的<progress-circle>原生 JS Web 組件，在所有現代瀏覽器中都支持。

對于您的用例，它需要一些額外的 180 度旋轉：

<b>Standard/Native Web Component support in Frameworks:</b><br>
<progress-circle value="100%">No FrameWork</progress-circle>
<progress-circle value="71%" stroke="red" color="red">React</progress-circle>
<progress-circle value="100%">Others</progress-circle>


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

<style>
  progress-circle {
    font-family: Arial;
    width: 120px; /* StackOverflow viewport */
  }
  
  progress-circle::part(slice0),
  progress-circle::part(slice1),
  progress-circle::part(slice2),
  progress-circle::part(text) {
    transform-origin: center;
    transform: rotate(180deg);
  }
</style>

<progress-circle>帶有未經許可源代碼的 Web 組件構建說明：
DEV.to 發布：2021 年繪制餅圖需要哪些 Web 技術
（標準 Web 組件會做的劇透警告）

標籤：html svg

上一篇：可以從單獨的檔案中匯入用于背景影像的編碼SVG嗎？

下一篇：包含符號使用元素的SVG.js移動組