SVG Rect高度設置無法使用FireFox和Ms邊緣

Question

您可以看看this demo，並讓我知道爲什麼height動畫不能在Firefox和MS Edge上使用？

它在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

在邊緣和Firefox做工精細你必須把高度作爲一個屬性，如SVG 1.1確實不是一個風格SVG 2提議。

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