Behseini Behseini - 3 months ago 42
Javascript Question

SVG Rect Height Setting Not Working on FireFox & Ms Edge

Can you please take look at this demo and let me know why the

height
animation not working on Firefox and MS Edge?

It is Working fine on Chrome



$("#app").hover(function(){
$('#fillup').animate({height: "320"},3000);
console.log("In");
}, function(){
$('#fillup').animate({height: "0"},3000);
console.log("Out");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="320" height="320" viewBox="0 0 320 320" id="app">
<rect x="0" y="0" width="320" height="0" fill="#47f" id="fillup" />
</svg>




Answer Source

In Edge and Firefox you must treat height as an attribute, as SVG 1.1 does rather than a style as SVG 2 proposes.

$("#app").hover(function(){
    $('#fillup').animate(
        { height: 320 },
        {
            duration: 3000,
            step: function(now) { $(this).attr("height", now); }
        });
    console.log("In");
    }, function(){
    $('#fillup').animate(
        { height: 0 },
        {
            duration: 3000,
            step: function(now) { $(this).attr("height", now); }
        });
     console.log("Out");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="320" height="320" viewBox="0 0 320 320" id="app">
  <rect  x="0" y="0" width="320" height="0" fill="#47f" id="fillup" />
 </svg>