Firefox不会对SVG大小更改进行动画处理 [英] Firefox does not animate SVG size changes

问题描述

我们已经实现了一个带有JavaScript代码操作的SVG插图的网页。它可以在所有主流浏览器中使用。

  svg rect {$ b $} CSS  transition 属性用于设置状态之间的转换。 b转换：0.6s缓解; 
} 
  

它适用于所有主流浏览器。然而，Firefox只是动画的颜色变化，而不是SVG元素的大小和位置的变化。

我在JS Fiddle中设置了一个最小的例子： https://jsfiddle.net/gvswzghf/ 。它增长和缩小矩形，同时改变颜色。

这是Firefox的知识局限吗？或者如何解决这个问题？

---

HTML：

 < DIV> 
< svg id =svgviewBox =0 0 400 300> 
< rect x =50y =200width =300height =100fill =＃000>< / rect> 
< / svg> 
< / div> 
< p> 
< button id =bt-grow>成长< /按钮> 
< button id =bt-shrink>收缩< /按钮> 
< / p> 
  

样式表：

  svg rect {
 transition：0.6s ease; 
} 
 
 svg {
 margin：0 auto; 
} 
 
 p {
 text-align：center; 
 
 $ / code $ 
 
 $ b $ p 
 
 
  var rect = document.getElementById（svg）。children [0]; 
 
 document.getElementById（bt-grow）。addEventListener（click，function（）{
 rect.setAttribute（y，0）; 
 rect.setAttribute（height，300）; 
 rect.setAttribute（fill，＃090）; 
 return false; 
}）; 
 
 document.getElementById（bt-shrink）。addEventListener（click，function（）{
 rect.setAttribute（y，200）; 
 rect.setAttribute（height，100）; 
 rect.setAttribute（fill，＃000）; 
 return false; 
}）; 
  
 
 
解决方案
不能使用CSS动画和SVG 1.1 （Firefox实现的）y和width是属性。在SVG 2中，它们是CSS属性。 Chrome（及其克隆Opera）是目前唯一已经实现了SVG 2这一部分的UA。 
 
 
对于Firefox支持，您必须使用SMIL。有向SMIL添加SMIL支持。  
We've implemented a web page with an SVG illustration that's manipulated by Javascript code. It's working in all major browsers. The CSS transition attribute is used to animate the transitions between states:
svg rect {
   transition: 0.6s ease;
}
It works in all major browser. However, Firefox only animates the color change but not the change in size and position of the SVG element.


I've set up a minimal example in JS Fiddle: https://jsfiddle.net/gvswzghf/. It grows and shrinks a rectangle and changes the color at the same time.

Is this a know limitation of Firefox? Or how can this be fixed?



HTML:
<div>
  <svg id="svg" viewBox="0 0 400 300">
    <rect x="50" y="200" width="300" height="100" fill="#000"></rect>
  </svg>
</div>
<p>
  <button id="bt-grow">Grow</button>
  <button id="bt-shrink">Shrink</button>
</p>
Style sheet:
svg rect {
  transition: 0.6s ease;
}

svg {
  margin: 0 auto;
}

p {
  text-align: center;
}
Javascript code:
var rect = document.getElementById("svg").children[0];

document.getElementById("bt-grow").addEventListener("click", function () {
  rect.setAttribute("y", "0");
  rect.setAttribute("height", 300);
  rect.setAttribute("fill", "#090");
  return false;
});

document.getElementById("bt-shrink").addEventListener("click", function () {
  rect.setAttribute("y", "200");
  rect.setAttribute("height", 100);
  rect.setAttribute("fill", "#000");
  return false;
});

解决方案
You cannot animate attributes with CSS animation and in SVG 1.1 (which Firefox implements) y and width are attributes. In SVG 2 they are CSS properties. Chrome (and its clone Opera) is currently the only UA to have implemented this part of SVG 2. 

For Firefox support you'll have to use SMIL. There are polyfills to add SMIL support to Chrome. 

                        
这篇关于Firefox不会对SVG大小更改进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！