我正在尝试为 svg
制作动画path
与 animate
标签,关注 this tutorial来自css技巧。我可以用 css 关键帧为路径设置动画,结果是这样的:
#mySvg path{
animation: scale-path 10s ease-in-out infinite;
}
@keyframes scale-path {
50% {
d: path('M1036,540L883,540L883,693Z');
}
}
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51" />
</svg>
但问题是我不能用
animate
实现同样效果的动画标签(它应该会有很多 path
带有不同动画的标签)。我不确定这是否是正确的语法:<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
from="M1045, 520L1173, 558L1184, 393Z"
to="M1036; 540L883; 540L883; 693Z"
dur="10s"
repeatCount="indefinite"
values="M1036; 540L883; 540L883; 693Z"
keyTimes="0.5;" />
</path>
</svg>
最佳答案
你写错了值,你应该注意,
和 ;
.路径全值使用,
作为分隔符(例如: M1045, 520L1173, 558L1184, 393Z
)并且这些值由 ;
分隔内values
属性
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
from="M1045, 520L1173, 558L1184, 393Z"
to="M1036, 540L883, 540L883, 693Z"
dur="5s"
values="M1045, 520L1173, 558L1184, 393Z;M1036, 540L883, 540L883, 693Z;M1045, 520L1173, 558L1184, 393Z"
repeatCount="indefinite" />
</path>
</svg>
关于css - 如何使用 animate 标签为 svg path d 属性设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51614659/