animation - 第二次点击时 SVG 动画反转

Question

我是一个尝试制作交互式 SVG 的新手 - 最好没有任何外部脚本。我想要达到的效果是让一个 SVG 元素充当一个交互式开关，使另一个元素出现和消失。

请在下面找到一个简单版本，其中文本“Toggle”用作切换。单击时，这将使矩形的不透明度属性从 0 变为 1，使其出现。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
   width="47.652294mm"
   height="10.096307mm"
   viewBox="0 0 47.652294 10.096307"
   version="1.1"
   id="svg8">
  <style
     id="style861"></style>
  <defs
     id="defs2" />
  <g
     id="layer1"
     transform="translate(-29.085516,-61.315985)">
    <rect
       fill="#ff0000"
       opacity="0"
       id="rect"
       width="9.8317242"
       height="9.8317242"
       x="66.773796"
       y="61.448277">
       <animate attributeName="opacity" fill="freeze" from="0" to="1" dur="2s" begin="toggletext.click" />
     </rect>
    <text
       xml:space="preserve"
       style="font-size:8.46667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;stroke-width:0.264583"
       x="29.085516"
       y="68.002762"
       id="toggletext"><tspan
         id="tspan857"
         x="29.085516"
         y="68.002762"
         style="stroke-width:0.264583">Toggle</tspan></text>
  </g>
</svg>

任何后续点击现在只会简单地重复相同的动画。但我想要任何第二个(第四个、第六个等)点击来反转动画(即让矩形消失)。换句话说，真正充当切换器。

任何有关如何使用尽可能少的代码和/或不可见元素实现此效果的建议将不胜感激。 谢谢!

Answer 1

我是这样做的:我使用了 2 个重叠的文本元素，我将指针事件设置为全部或无点击:这样您将在一个文本上单击一次，然后在另一个文本上单击一次。

矩形有 2 个动画元素:当您点击第一个文本时，一个动画将开始，第二个动画将在您点击第二个文本时开始。

text{font-size:8.46667px;line-height:1.25;font-family:sans-serif;stroke-width:0.264583;}

<svg width="300" viewBox="0 0 47.652294 10.096307" id="svg8">

  <g id="layer1" transform="translate(-29.085516,-61.315985)">
    <rect fill="#ff0000" opacity="0" id="rect" width="9.8317242" height="9.8317242" x="66.773796" y="61.448277">
      <animate attributeName="opacity" fill="freeze" from="0" to="1" dur="2s" begin="toggletext1.click" />
      <animate attributeName="opacity" fill="freeze" from="1" to="0" dur="2s" begin="toggletext2.click" />
    </rect>
    

    <text x="29.085516" y="68.002762" id="toggletext2">
      <tspan x="29.085516" y="68.002762">Toggle</tspan>
      <set attributeName="pointer-events" from="none" to="all" begin="toggletext1.click" />
      <set attributeName="pointer-events" from="all" to="none" begin=".click" />
    </text>
    
    <text x="29.085516" y="68.002762" id="toggletext1">
      <tspan x="29.085516" y="68.002762">Toggle</tspan>
      <set attributeName="pointer-events" from="none" to="all" begin="toggletext2.click" />
      <set attributeName="pointer-events" from="all" to="none" begin=".click" />
    </text>
  </g>
</svg>