Question

我正在为通过多个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,5 L 9,1 9,9 Z;
                                       M 2,2 L 5,8 8,2 Z;
                                       M 1,5 L 9,1 9,9 Z;
                                       M 7,3 L 3,3 5,7 Z;
                                       M 1,5 L 9,1 9,9 Z;
                                       M 6,4 L 6,6 4,5 Z;
                                       M 1,5 L 9,1 9,9 Z" dur="3s" repeatCount="indefinite" />
  </path>
</svg>

随着更复杂的动画和形状，SVG变得很大，容易出错，并且通常很难使用。理想情况下，我可以执行以下操作：<animate values="${a};${b};${a};${c};${a};${d};${a}" ... />。有没有JavaScript的方法吗？

我以为我很接近CSS变量和数据URI作为:: before的content属性...但是数据URI不是字符串（我真正想要的不是黑客，而是“正确的方法”我错过了）

Answer 1

在SVG2中，d属性已成为一个演示属性，因此可以由CSS设置。
因此，我们可以在具有CSS变量的CSS动画中使用它。

但是浏览器支持仍然非常低（今天只有Blink）。

<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">
  <style>
:root {
  --def-A: path("M 1,5 L 9,1 9,9 Z");
  --def-B: path("M 2,2 L 5,8 8,2 Z");
  --def-C: path("M 7,3 L 3,3 5,7 Z");
  --def-D: path("M 6,4 L 6,6 4,5 Z");
}
path {
  animation: path-change 3s linear infinite;
}
@keyframes path-change {
  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); }
}
  </style>
  <path fill="black" stroke="none"></path>
</svg>

因此，这只是一次性的事情，您也可以考虑使用文本编辑器的replace-all方法来简化版本。

在动画值中重用和组合SVG path d字符串

1 个答案: