SVG dashoffset開始角度

Question

我用SVG創建了一個簡單的圓形進度條，但是我從循環的頂部（順時針）開始創建進度條時遇到了一些麻煩，而不是像當前那樣右側。

下面的代碼： ​​

我會很感激，如果你能提供關於如何解決這件事情的一些指導。謝謝。

//編輯： 我設法通過CSS要做到這一點，是這樣的：

{ transform: rotateZ(-90deg); transform-origin: center center; }

但仍然在尋找如何通過JS做到這一點。

Answer 1

所有非路徑圖形（如您使用的<circle>）都有一個定義的「等效路徑」。這是指定的，以便虛線模式在所有SVG渲染器中表現一致。在<circle>的情況下，等效路徑被定義爲從3點鐘位置開始，並且圍繞該圓圈順時針進行。

參見：https://www.w3.org/TR/SVG/shapes.html#CircleElement

有沒有辦法改變的是，除了通過旋轉或以其他方式將其轉化。您可以使用CSS完成此操作（目前不在所有瀏覽器中運行）或<circle>上的transform屬性。