I have created a Hourglass animation with SVG. It works fine in chrome && opera, but has some issues on firefox.
The Hourglass could be paused and then later on resumed. Now in chrome/opera I can read the current value of d
and then to apply it for the animation element on resume, but in firefox the attribute isn't being updated and therefor I can't assign the current attribute value to the resumed element.
I tried:
Using the Element.animate() API but it is also not changing the current value of the element.
Using getComputedStyle() method but it can't get the value of d
since firefox isn't refering to it as a css property.
This is the example code:
svg.html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path d="M 0 0 L 0 200 L 200 200 L 0 0 Z" fill="black" id="myPath"/>
</svg>
svg.js
var myPath = document.getElementById('myPath');
var anima = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
anima.setAttributeNS('', 'attributeType', 'XML');
anima.setAttributeNS('', 'attributeName', 'd');
anima.setAttributeNS('', 'values', 'M 0 0 L 0 200 L 200 200 L 0 0 Z; M 0 0 L 100 100 L 200 200 L 0 0 Z');
anima.setAttributeNS('', 'dur', '5s');
anima.setAttributeNS('', 'fill', 'freeze');
myPath.appendChild(anima);
myPath.lastChild.beginElement();
setTimeout(() => {
console.log(myPath.getAttribute('d')); // in chrome gives the current value, in firefox gives the element original value
}, 1500)
The questions are:
1. How to get the current d
value in firefox?
2. Is it possible without extra libraries?
I made a simple example
And this is the hourglass if anyone wants to see where it is needed
Anyone knows something about it?
So using @RobertLongson tip I managed to get the current
d
attribute. It is way less comfortable than it is in chrome/opera but at least there is a way :)For people with the same problem I wrote this function to return a string the same way you would get in chrome:
Hopefully it would be helpful for others too, if you find any problem with my code please leave a comment, thanks.