SVG路径长度don'；我不在野生动物园工作

我正在尝试使用SVG和CSS动画制作一些不断增长的线条动画。由于这些行分别具有不同的长度，因此我使用

pathLength

为它们指定一个虚拟长度。因此，我只能对所有关键帧使用一个

@keyframe

下面是示例代码

线{
动画名称：线条生长；
动画持续时间：3s；
动画迭代次数：无限；
}
@关键帧线增长{
从{
笔划数组：0，1000；
}
到{
笔划数组：10001000；
}
}

我使用临时解决方案。这不是一个美丽的方式，但我认为至少它仍然是一个干净的方式。这是那些面临同样问题的人的参考

我使用JavaScript动态计算每行的长度，生成一些CSS消息，然后插入到

window.stylesheet

。请注意，这些操作应在

window.onload

之后完成

以下是示例代码：

window.onload=setPathAnimational；
var seqAnimate=[“l-垂直”、“l-水平”、“l-hypo”]；
函数setPathAnimational（）{
对于（变量i=0；i

svg行{
//动画填充模式：正向；
动画迭代次数：无限；
动画持续时间：1s；
}

解决方案#1：

最后，我发现了一个仅使用css变量的css解决方案。唯一的缺点是，必须将每个笔划的实际路径长度输入css变量（使用任何脚本语言创建笔划时只能计算一次）。在svg中，on将

pathLength=“1000”

替换为

style=“--L:nnn”

，其中

--L

是css变量，nnn是路径的实际长度：

<svg width="1000px" height="100px">
    <g stroke="#FAB" stroke-width="3">
        <line style="--L:500;" id="Line1" x1="20" y1="20" x2="520" y2="20"/>
        <line style="--L:760;" id="Line2" x1="20" y1="50" x2="780" y2="50"/>
    </g>
</svg>

---

解决方案#2：

如果不能或不想预先计算每个笔划的路径长度，下面是一个解决方案，其中一个简短的javascript代码在运行中完成这项工作

css：

@keyframes line-grow {
    from {
        stroke-dasharray: 0 var(--L);
    }
    to {
        stroke-dasharray: var(--L) var(--L);
    }
}

svg：

<svg width="1000px" height="100px">
    <g stroke="#FAB" stroke-width="3">
        <line id="Line1" x1="20" y1="20" x2="520" y2="20"/>
        <line id="Line2" x1="20" y1="50" x2="780" y2="50"/>
    </g>
</svg>

---

如果只有水平

元素，则可以设置从

比例（0，1）

到

比例（1，1）

的转换动画。您需要为每个单独的lline设置

变换原点

，对于非水平线，在缩放后旋转它们。这实际上对我在safari中很有效，虽然动画感觉不同，但线条是不同的animated@godblessstrawberry是的，还有动画，但是

stroke dasharray

计算忽略

路径长度

。实际上，这个bug与动画没有直接关系，但我想使用这个功能来实现动画效果，这与您在Chrome中看到的效果相同。

<svg width="1000px" height="100px">
    <g stroke="#FAB" stroke-width="3">
        <line id="Line1" x1="20" y1="20" x2="520" y2="20"/>
        <line id="Line2" x1="20" y1="50" x2="780" y2="50"/>
    </g>
</svg>

function magic()
{
    var list, k, style;
    list = document.querySelectorAll("line");
    for (k=0; k<list.length; k++)
    {
        style = "--L:" + list[k].getTotalLength() + ";";
        style += "animation: line-grow 3s infinite;";
        list[k].setAttribute("style", style);
    }
}

window.addEventListener("load", magic, false);

function setKeyframes(name, len)
{
    // add a specific keyframes for each line using its length
    // to the style of the page
    var a, e = document.createElement("style");
    a = "@keyframes " + name + " {";
    a += "from {stroke-dasharray: 0, " + len + ";}";
    a += "to {stroke-dasharray: " + len + ", " + len + ";}";
    a += "}";
    e.type = 'text/css';
    if (e.styleSheet) e.styleSheet.cssText = a;
    else e.appendChild(document.createTextNode(a));
    document.getElementsByTagName('head')[0].appendChild(e);
}

function magic()
{
    // does the job for each line
    var list, k, name, len;
    // adapt the following instruction
    // if all the lines of the document are not concerned
    list = document.querySelectorAll("line");
    for (k=0; k<list.length; k++)
    {
        name = "line-grow-" + k;
        len = list[k].getTotalLength();
        setKeyframes(name, len);
        list[k].style.animationName = name;
        list[k].setAttribute("pathLength", len);
    }
}

window.addEventListener("load", magic, false);