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

Question

我正在通过几个 d 值制作一条路径动画，并不断重复使用相同的形状。在下面的简化示例中，我将主三角形 M 1,5 L 9,1 9,9 Z 变形为 3 个较小的三角形。为此，我必须将主三角形的 d 值写入 <animate/> 的值属性 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 的内容属性 ...但是数据 URI 不是字符串（我真正想要的是这是一个 hack，但 "right way" 我错过了）

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 路径 d 字符串

reuse and combine SVG path d strings in animate values

svg

svg-animate