SVG pathLength don't work on safari

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.

pathLength

@keyframe

Here is the sample code

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

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?

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

console.log

pathLength

<line>

scale(0, 1)

scale(1, 1)

transform-origin

stroke-dasharray

pathLength

1 Answer
1

I temporary use a workaround. It is not a beautiful way, but i think at least it's still a clean way. This is a reference for those who face the same problem.

I use JavaScript to dynamically calculate each length of the lines, generate some CSS msg, then insert to window.stylesheet. Note that these should be done after window.onload.

window.stylesheet

window.onload

Here is the sample code:

window.onload = setPathAnimationAll;

var seqAnimate = ["l-vertical", "l-horizen", "l-hypo"];

function setPathAnimationAll()
for(var i = 0; i < seqAnimate.length; ++i)
setPathAnimationSingle(seqAnimate[i]);



function setPathAnimationSingle(id)
var target = document.getElementById(id);
var nameAnimete = genAnimateName(id);
var msgCss = genPathAnimateMsg(nameAnimete, getSvgLineLength(target));
insertCss(msgCss);
target.style.animationName = nameAnimete;


function getSvgLineLength(ele)

return Math.sqrt(Math.pow(ele.x1.animVal.value - ele.x2.animVal.value, 2) + Math.pow(ele.y1.animVal.value - ele.y2.animVal.value, 2));


function genAnimateName(id)
return "dynamic-animation-" + id;


function genPathAnimateMsg(name, length)
return "@keyframes " + name +" from stroke-dasharray: 0, " + length + "; to stroke-dasharray: " + length + "; " + "n";


function insertCss(msg)

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);
window.stylesheet = document.styleSheets[document.styleSheets.length - 1];
window.stylesheet.insertRule(msg, window.stylesheet.cssRules.length);


svg line
//animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-duration: 1s;


<svg width="400px" height="200px" viewBox="0 0 400 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g stroke="#FABE00" stroke-width="3">
<line x1="301" y1="0" x2="301" y2="183" id="l-vertical"></line>
<line x1="301" y1="183" x2="120" y2="183" id="l-horizen"></line>
<line x1="120" y1="183" x2="301" y2="0" id="l-hypo"></line>
</g>

</svg>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.