动画定义路径的 d 属性在 firefox 上不起作用
Animating a defined path's d attribute doesn't work on firefox
我正在为 path
的 d
属性设置动画,该属性环绕 defs
标签并使用
链接
几个 use
标签。这在 Chrome 上工作正常,但在 Firefox 上没有动画。我用相对路径和绝对路径试过了都没有用。
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" />
</defs>
<use xlink:href="#a" />
<animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>
实现此功能的唯一方法是重复 path
并为它们全部设置动画,还是有办法在 Firefox 上实现此功能?
正如 @Robert Longson 评论的那样
I think you'd need to repeat the paths. At the moment SMIL changes to
the things that a element points to do not trigger the to
re-render.
因此需要在<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 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>
我正在为 path
的 d
属性设置动画,该属性环绕 defs
标签并使用
链接
几个 use
标签。这在 Chrome 上工作正常,但在 Firefox 上没有动画。我用相对路径和绝对路径试过了都没有用。
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" />
</defs>
<use xlink:href="#a" />
<animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>
实现此功能的唯一方法是重复 path
并为它们全部设置动画,还是有办法在 Firefox 上实现此功能?
正如 @Robert Longson 评论的那样
I think you'd need to repeat the paths. At the moment SMIL changes to the things that a element points to do not trigger the to re-render.
因此需要在<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 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>