如何解决对已定义路径的d属性进行动画处理在Firefox上不起作用
我正在为gatsby-node.js
的{{1}}属性设置动画,该属性包裹在d
标记周围并使用
链接
几个path
标签。在Chrome上运行正常,但是在Firefox上没有动画。我尝试了相对和绝对路径,但无济于事。
defs
使这项工作唯一的方法是重复use
并将其全部动画化,还是有办法在Firefox上使这项工作呢?
解决方法
@Robert Longson
的评论我认为您需要重复这些路径。目前,SMIL更改为 元素指向的事物不会触发 重新渲染。
因此,有必要直接在<path>
标签内转移动画
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="0s"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>
点击后开始动画
<svg id ="svg1" viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。