Question

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

<!-- comment to fool the edit limiter -->

img{
  width:500px;
  height:200px;
  }
.images{
  width:500px;
  height:200px;
  align-items:center;
  position:relative;
  
  }
p{
  position:absolute;
  bottom:0;
  color:yellow;
  left:50%;
  }
span{
  position: relative;
  left: -50%;
  }

现在我只想在开头显示<div class="images"> <img src="https://i.stack.imgur.com/wwy2w.jpg"> <p><span>Some text to appear></span></p> </div>的{{1}}，在<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"/> ... transparant并显示id1 - 这不起作用。我假设具有较高ID的透明图像位于较高级别（在z方向上）并阻止较低图像的点击事件。但我不知道如何让它们完全“消失”或其他什么。

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

Answer 1

你可以用SMIL动画做到这一点。我们每个州只需要几个<set>个元素。点击即可触发两者中的每一个。一个显示下一个组，另一个显示最后一个组。

＆＃13;

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

＆＃13;

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

＆＃13;

// 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");
    }
  }
}

＆＃13;

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

＆＃13;

点击SVG“animate”系列图片

1 个答案: