我正在为通过多个d值的路径设置动画,并不断重复使用相同的形状。在下面的简化示例中,我将一个主三角形M 1,5 L 9,1 9,9 Z
变形为3个较小的三角形。为此,我必须将主三角形的d值写入<animate/>
的values属性中4次。
<svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="black" stroke="none">
<animate attributeName="d" values="M 1,9 Z;
M 2,2 L 5,8 8,2 Z;
M 1,9 Z;
M 7,3 L 3,3 5,7 Z;
M 1,9 Z;
M 6,4 L 6,6 4,5 Z;
M 1,9 Z" dur="3s" repeatCount="indefinite" />
</path>
</svg>
随着更复杂的动画和形状,SVG变得很大,容易出错,并且通常很难使用。理想情况下,我可以执行以下操作:<animate values="${a};${b};${a};${c};${a};${d};${a}" ... />
。有没有JavaScript的方法吗?
我以为我很接近CSS变量和数据URI作为:: before的content属性...但是数据URI不是字符串(我真正想要的不是黑客,而是“正确的方法”我错过了)