Question

请您查看this demo并告诉我为什么height动画无法在Firefox和MS Edge上运行？

Chrome正常运行

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在Edge和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>

SVG矩形高度设置不适用于FireFox＆amp; Edge女士

1 个答案: