Chrome 中的 svg 动画标签问题

发布于 2024-12-04 04:24:29 字数 553 浏览 1 评论 0原文

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

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

任何帮助将不胜感激。

原文

I wrote a svg code as

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

This works correctly in Firefox , Opera and Safari but does not work in Google Chrome browser.How do I make this work in Chrome?

The blue rectangle should not be displayed at the end of animation as last value in values attribute is 'none' .

Any help will be highly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨与橙与城 2024-12-11 04:24:29

您可以对不透明度属性进行动画处理而不是显示，并具有相同的效果。

回复收藏 0 原文

山田美奈子 2024-12-11 04:24:29

使用“内联”而不是“继承”，它按预期工作

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

using 'inline' instead of 'inherit' it works as supposed

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

回复收藏 0 原文

~没有更多了~