SVG pathLength在Safari上不起作用 [英] SVG pathLength don't work on safari

问题描述

我正在尝试使用SVG和CSS动画制作一些不断增长的线条动画.由于行的长度分别不同，因此我使用 pathLength 为它们分配虚拟长度.因此，我只能对它们全部使用一个 @keyframe .

I am trying to do some growing line animation with SVG and CSS animation. Since the lines have different length respectively, I use pathLength to assign a virtual length for them. Thus i can use only one @keyframe for all of them.

这是示例代码

<svg width="1000px" height="100px">
      <g stroke="#FAB" stroke-width="3">
        <line id="Line1" x1="20", y1="20", x2="520", y2="20" pathLength="1000"/>
        <line id="Line2" x1="20", y1="50", x2="780", y2="50" pathLength="1000"/>
      </g>
    </svg>
<style>
  line {
    animation-name: line-grow;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
  
  @keyframes line-grow {
    from {
      stroke-dasharray: 0, 1000;
    }
    to {
      stroke-dasharray: 1000, 1000;
    }
  }
</style>

此技巧适用于Chrome和Firefox，但不适用于Safari.还有其他技巧可以在所有这些浏览器上使用吗?还是我可以在Safari上应用此技巧?

This trick works on Chrome and Firefox, but not in Safari. Is there any other trick that can work on all these browsers? Or is there some way that i can apply this trick on Safari?

我 console.log 使用JS的 pathLength 确实在Safari中返回了一些内容.

I console.log the pathLength with JS which do return something in Safari.

推荐答案

解决方案1:

最后，我仅使用css变量在css中找到了解决方案.唯一的缺点是，已将此css变量输入每个笔画的实际路径长度(使用任何一种脚本语言创建笔画时，只能计算一次).在svg中，on用 style =-L:nnn" 替换 pathLength ="1000" ，其中-L 是一个CSS变量而nnn是路径的实际长度:

Finally, I found a solution in css only using a css variable. The only drawback is that one has feed this css variable with the actual path length of each stroke (this can be computed only once when creating the stroke using any kind of script language). In the svg, on replaces pathLength="1000" by style="--L:nnn" where --L is a css variable and nnn is the actual length of the path:

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

在CSS中，使用 @keyframes 代码中的-L 变量:

In the css, on uses --L variable in the @keyframes code:

line {
    animation-name: line-grow;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

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

---

解决方案2:

---

Solution #2:

如果不能或不希望预先计算每个笔画的路径长度，则下面是使用简短的javascript代码即时完成工作的解决方案.

If one cannot or does not want to pre-compute the path length of each stroke, below is a solution with a short javascript code doing the job on-the-fly.

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>

javascript:

The javascript:

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

---

解决方案3:

---

Solution #3:

为便于记录，下面是一种类似于Cigany解决方案的以前的解决方案，但是使用 getTotalLength()方法来计算行长(因此，可以计算任何类型的行长).路径，包括包含贝塞尔曲线的路径).

For the record, below is a former solution similar to the Cigany solution, but using getTotalLength() method to compute the line length (as a result, one can compute the length of any kind of path easily including those that contain Bézier curves).

只需在页面末尾添加一个脚本(javascript)，即可对每一行执行该操作:

Just add a script (javascript) to the end of the page that does for each line:

• 使用 getTotalLength()
计算其长度
• 使用此长度添加一个关键帧
• 相应地更改其动画名称
• 修改其 pathLength 属性(以使知道如何使用此属性的浏览器正常工作)

• compute its length using getTotalLength()
• add a keyFrames using this length
• change its animation name accordingly
• modify its pathLength attribute (to keep browsers that know how to use this attribute working)

代码可以是:

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

这篇关于SVG pathLength在Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！