Chrome中的svg动画标记问题

我编写了一个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中工作

蓝色矩形不应显示在动画末尾，因为“值”属性中的最后一个值为“无”

---

任何帮助都将不胜感激。

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

使用“内联”而不是“继承”，它可以正常工作

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