использование svg-анимации, уменьшающей непрозрачность прямоугольника при нажатии на прямоугольник

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>