在动画值中重用并组合SVG路径d字符串
我正在通过几个d值设置路径动画，并不断重复使用相同的形状。在下面的简化示例中，我将一个主三角形在动画值中重用并组合SVG路径d字符串,svg,svg-animate,Svg,Svg Animate,我正在通过几个d值设置路径动画，并不断重复使用相同的形状。在下面的简化示例中，我将一个主三角形m1,5l9,19,9z变形为3个较小的三角形。为此，我必须将主三角形的d值写入的values属性中4次 在SVG2中，d属性已成为一个表示属性，因此可以由CSS设置。 因此，我们可以在css动画中使用它，使用css变量 但浏览器支持率仍然很低（到今天为止只会闪烁） ：根{ --def-A：路径（“M1,5L9,19,9Z”）； --def-B：路径（“M2,2 L 5,8,2 Z”）； --de
m1,5l9,19,9z在SVG2中，
d因此，我们可以在css动画中使用它，使用css变量 但浏览器支持率仍然很低（到今天为止只会闪烁）
：根{
--def-A：路径（“M1,5L9,19,9Z”）；
--def-B：路径（“M2,2 L 5,8,2 Z”）；
--def-C：路径（“M7,3L3,35,7Z”）；
--def-D：路径（“M 6,4 L 6,6 4,5 Z”）；
}
路径{
动画：路径变换3s线性无限；
}
@关键帧路径更改{
0%{d:var（--def-A）；}
17%{d:var（--def-B）；}
33%{d:var（--def-A）；}
50%{d:var（--def-C）；}
66%{d:var（--def-A）；}
83%{d:var（--def-d）；}
100%{d:var（--def-A）；}
}
d因此，我们可以在css动画中使用它，使用css变量 但浏览器支持率仍然很低（到今天为止只会闪烁）
：根{
--def-A：路径（“M1,5L9,19,9Z”）；
--def-B：路径（“M2,2 L 5,8,2 Z”）；
--def-C：路径（“M7,3L3,35,7Z”）；
--def-D：路径（“M 6,4 L 6,6 4,5 Z”）；
}
路径{
动画：路径变换3s线性无限；
}
@关键帧路径更改{
0%{d:var（--def-A）；}
17%{d:var（--def-B）；}
33%{d:var（--def-A）；}
50%{d:var（--def-C）；}
66%{d:var（--def-A）；}
83%{d:var（--def-d）；}
100%{d:var（--def-A）；}
}
dpath（）dpath（）