Question

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

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

使用svg动画在单击矩形时减少矩形的不透明度

1 个答案: