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

Question

我需要在单击 rectangle.This 时更改矩形的不透明度（从 1 到 0）是我的代码 used.But 我无法更改 rectangle.If 谁知道请帮帮我。

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

Answer 1

您没有动画的持续时间。此外，如果动画是元素的子元素，则应用到不需要 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>

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

using svg animation reducing the opacity of a rectangle when clicking on the rectangle

animation

svg

opacity