带有交互的 SVG

Question

我知道 animations/transforms 可以在 SVG 中完成。

我想以交互方式执行此操作，例如如果（在 SVG 中）我显示一个简单的和“2 + 2 =？”，我想要“？”在答案上做一个图像，当“？”出现时是 clicked/touched 它逐渐淡化以显示下面的答案。

这个问题展示了如何制作动画，所以以此为例：

<svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

如何通过点击矩形触发淡入淡出？

Answer 1

像这样添加 begin="click"...

<svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="red;blue;red" dur="10s" begin="click" repeatCount="indefinite" />
  </rect>
</svg>

带有交互的 SVG

SVG with interaction

svg

interactive

svg-animate