如何在 Javascript 中设置 SVG CSS 属性的样式？答案

【问题标题】：How do I set the style of SVG CSS attributes in Javascript?如何在 Javascript 中设置 SVG CSS 属性的样式？
【发布时间】：2014-07-06 19:17:04
【问题描述】：

我正在尝试动态确定 SVG 路径数组的长度，然后将此值插入到属性 stroke-dasharray 和 stroke-dashoffset 的 HTML DOM 样式对象中。

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;
}

在找到here 的示例中，所有.hLine 路径（所有水平线）都应该有动画，但它们没有。这是因为不支持strokeDasharray 和strokeDashoffset 吗？

【问题讨论】：

标签： javascript dom svg css-transitions svg-animate

【解决方案1】：

您也始终可以通过将 pathLength (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength) 设置为一个值（例如 100 以方便基于百分比的修改）来固定路径长度。

【讨论】：

【解决方案2】：

首先，该 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; 
}

Demo here - 虽然还有一些工作要做才能让动画正常工作。

【讨论】：