单击矩形时使用 svg 动画降低矩形的不透明度

【问题标题】：using svg animation reducing the opacity of a rectangle when clicking on the rectangle单击矩形时使用 svg 动画降低矩形的不透明度
【发布时间】：2019-06-16 17:45:03
【问题描述】：

单击矩形时，我需要更改矩形的不透明度（从 1 到 0）。这是我使用的代码。但我无法更改矩形的不透明度。如果有人知道请帮助我.

<svg height="800px" width="1100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="rect1" x="263" y="87.5" width="100" height="25" fill="#F67F33" style="stroke:black;stroke-width:1">
     <animate xlink:href="#rect1" attributeName="opacity" from="1" to="0" begin="click" fill="freeze" />
  </rect>
</svg>

【问题讨论】：

标签： animation svg opacity

【解决方案1】：

动画没有持续时间。此外，如果 animate 是元素的子元素，则应用于不需要 xlink:href。

<svg height="800px" width="1100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="263" y="87.5" width="100" height="25" fill="#F67F33" style="stroke:black;stroke-width:1">
     <animate attributeName="opacity" from="1" to="0" dur="3s" begin="click" fill="freeze" />
  </rect>
</svg>

如果希望动画是瞬时的，可以使用 set

<svg height="800px" width="1100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="263" y="87.5" width="100" height="25" fill="#F67F33" style="stroke:black;stroke-width:1">
     <set attributeName="opacity" to="0" begin="click" fill="freeze" />
  </rect>
</svg>

【讨论】：