SVG Rectの高さ設定がFireFox＆Ms Edgeで動作しない

Question

this demoをご覧になり、heightアニメーションがFirefoxとMS Edgeで動作しない理由を教えてください。 SVG 2が提案しているとしてSVG 1.1のスタイルではなく、同じように

あなたが属性として高さを扱わなければならないクロム

$("#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

とFirefoxで正常に動作しています。

$("#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>