Chrome中的svg动画标签问题答案

【问题标题】：svg animate tag issue in ChromeChrome中的svg动画标签问题
【发布时间】：2014-04-04 14:54:09
【问题描述】：

我写了一个svg代码

<svg xmlns="http://www.w3.org/2000/svg">
   <g display='none'>
       <animate attributeName="display" begin="3.8" dur="0.7" fill="freeze" keyTimes="0;0.1428571429;0.8571428571;1.0000000000" values="inherit;none;inherit;none"/>
       <rect x='100' y='100' width='100' height='100' fill='blue'/>
   </g>
</svg>

这在 Firefox 、 Opera 和 Safari 中可以正常工作，但在 Google Chrome 浏览器中不起作用。如何在 Chrome 中使其工作？

蓝色矩形不应在动画结束时显示，因为 values 属性中的最后一个值为 'none' 。

我们将不胜感激。

【问题讨论】：

标签： svg

【解决方案1】：

您可以为 opacity 属性设置动画而不是 display 并具有相同的效果。

【讨论】：

【解决方案2】：

使用 'inline' 而不是 'inherit' 可以正常工作

<svg xmlns="http://www.w3.org/2000/svg">
  <g display='none'>
   <animate attributeName="display" begin="3.8" dur="0.7" fill="freeze"     
keyTimes="0;0.1428571429;0.8571428571;1.0000000000" values="inline;none;inline;none"/>
   <rect x='100' y='100' width='100' height='100' fill='blue'/>

【讨论】：