单击带有 SVG“动画”的一系列图像

Question

假设我有一个包含几个顶级“g”元素的 SVG 图像，如下所示：

<svg>
<g id="id1">...</g>
<g id="id2">...</g>
<g id="id3">...</g>
...
</svg>

现在我想只显示开头带有id1 的那个，随着用户反复点击图像（类似于PowerPoint 演示文稿）滑过id2、id3 等等。我尝试了这是第一步：

 <animate xlink:href="#id2" attributeName="opacity" from="0" to="0"  dur="0s" begin="0s"/>
 <animate xlink:href="#id3" attributeName="opacity" from="0" to="0"  dur="0s" begin="0s"/>
...

 <animate xlink:href="#id2" attributeName="opacity" from="0" to="100" dur="0.25s"  begin="click" id="anim1"/>
 <animate xlink:href="#id1" attributeName="opacity" from="100" to="0" dur="0.25s"  begin="anim1.begin" id="anim2"/>
...

第一行应该使除了id1 图像之外的所有图像都透明 - 这工作正常。接下来的两行应该使id1 透明并显示id2 - 这是行不通的。我假设具有较高 id 的透明图像位于较高级别（在 z 方向上）并阻止较低图像的点击事件。但我不知道如何让它们完全“消失”或其他什么。

也许还有更好的方法可以做到这一点......？

Answer 1

您可以使用 SMIL 动画来做到这一点。对于每个状态，我们只需要几个 <set> 元素。两者中的每一个都由单击触发。一个显示下一组，另一个隐藏最后一组。

<svg>
  <g id="id1">
     <rect width="100%" height="100%" fill="red"/>
  </g>
  <g id="id2" display="none">
     <rect width="100%" height="100%" fill="orange"/>
  </g>
  <g id="id3" display="none">
     <rect width="100%" height="100%" fill="yellow"/>
  </g>
  <g id="id4" display="none">
     <rect width="100%" height="100%" fill="green"/>
  </g>

  <set xlink:href="#id2" attributeType="XML" attributeName="display" 
       to="block" begin="id1.click" />
  <set xlink:href="#id1" attributeType="XML" attributeName="display" 
       to="none" begin="id1.click" />

  <set xlink:href="#id3" attributeType="XML" attributeName="display" 
       to="block" begin="id2.click" />
  <set xlink:href="#id2" attributeType="XML" attributeName="display" 
       to="none" begin="id2.click" />

  <set xlink:href="#id4" attributeType="XML" attributeName="display" 
       to="block" begin="id3.click" />
  <set xlink:href="#id3" attributeType="XML" attributeName="display" 
       to="none" begin="id3.click" />

  <set xlink:href="#id1" attributeType="XML" attributeName="display" 
       to="block" begin="id4.click" />
  <set xlink:href="#id4" attributeType="XML" attributeName="display" 
       to="none" begin="id4.click"/>

</svg>

使用 Javascript 也很容易 - 也许更灵活。

// Get the SVG element
var mysvg = document.getElementById("mysvg");

// Get all the G elements that are children of our SVG
var groups = mysvg.querySelectorAll("g");

// Which G is currently shown
var current = 0;

// Show that G and hide the others
showGroup(current);

// Add the click event handler to the SVG
mysvg.addEventListener("click", groupSwitcher);



// Define the click handler that we will attach to the SVG.
function groupSwitcher(evt)
{
  // When we receive a click, select the next group
  current += 1;
  // Wrap naround to the beginning if we go past the last one
  if (current === groups.length)
    current = 0;
  
  // Show the new group (and hide the old one);
  showGroup(current);
}


// The function that shows one group and hides the others.
function showGroup(groupNumber)
{
  for (var i=0; i < groups.length; i++) {
    if (i === groupNumber) {
      // If this is the one we want to show then make it visible
      groups[i].setAttribute("visibility", "visible");
    } else {
      // It's one of the others, hide it
      groups[i].setAttribute("visibility", "hidden");
    }
  }
}

<svg id="mysvg">
  <g id="id1">
     <rect width="100%" height="100%" fill="red"/>
  </g>
  <g id="id2">
     <rect width="100%" height="100%" fill="orange"/>
  </g>
  <g id="id3">
     <rect width="100%" height="100%" fill="yellow"/>
  </g>
  <g id="id4">
     <rect width="100%" height="100%" fill="green"/>
  </g>
</svg>