HTML5 Canvas DrawImage() Not Working On FireFox
The problem: I'm working on a project where I need to animate the drawing of a symbol on a canvas. This is great and working on chrome, but on FireFox it doesn't draw anything. No
Solution 1:
Answer :
The problem indeed wasn't the drawImage() method. It was the way that I've written the svg.
Wrong:
<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.54 403.54">
<defs>
<style>
.shape{
fill: transparent;
stroke-dasharray: 570;
stroke-dashoffset: 570;
}
</style>
</defs>
<line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
<line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
</svg>
Good:
<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" width="403.54" height="403.54" version="1.1">
<defs>
<style>
.shape{
fill: transparent;
stroke-dasharray: 570;
stroke-dashoffset: 570;
}
</style>
</defs>
<line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
<line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
</svg>
thanks to Helder Sepulveda
Post a Comment for "HTML5 Canvas DrawImage() Not Working On FireFox"