时间戳

首页 > 解决方案 > 单击矩形时使用 svg 动画降低矩形的不透明度

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

问题描述

单击矩形时，我需要更改矩形的不透明度（从 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>

标签： animationsvgopacity

解决方案

您没有动画的持续时间。此外，如果 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>

推荐阅读