Question

我写了一个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”。

任何帮助都将受到高度赞赏。

Answer 1

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

Answer 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'/>

Chrome中的svg animate标记问题

2 个答案: