如何在 Javascript 中設置 SVG CSS 屬性的樣式？

Question

我正在嘗試動態確定 SVG 路徑數組的長度，然后將此值插入到 HTML DOM 樣式對象的屬性stroke-dasharray和stroke-dashoffset 。

var horizontals = document.getElementsByClassName('hLine');
for (var i = 0; i < horizontals.length; i++ ) {
    var drawingComponent = horizontals[i],
        length = svgPiece.getTotalLength();

    horizontals[i].style.strokeDasharray = length;
    horizontals[i].style.strokeDashoffset = length;
}

在此處找到的示例中，所有.hLine路徑（所有水平線）都應該有動畫效果，但它們沒有。 這是因為不支持strokeDasharray和strokeDashoffset嗎？

Answer 1

首先，Javascript存在一些問題：

var horizontals = document.getElementsByClassName('hLine');

您的SVG沒有類“hLine”的任何元素。

length = svgPiece.getTotalLength();

'svgPiece'沒有在任何地方定義。

嘗試這樣的事情：

var horizontals = document.querySelectorAll('#horizontal path')

for (var i = 0; i < horizontals.length; i++ ) {
    var path = horizontals[i],
        length = path.getTotalLength();

    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length; 
}

在這里進行演示 - 盡管仍有一些工作要做，以使動畫正常工作。

Answer 2

您也可以始終通過將 pathLength ( https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength ) 設置為一個值（如 100 以方便基於百分比的修改）來修復路徑長度.