SVG矩形高度设置在FireFox和Ms Edge上不起作用

Question

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 1

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>