SVG与互动

Question

我知道动画/变换可以在SVG中完成。

我想以交互方式这样做，例如如果（在SVG中）我显示一个简单的总和“2 + 2 =？”，我想要“？”成为答案的形象，当“？”单击/触摸它会淡化以显示下面的答案。

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

How to fade in and out color of svg

<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>