Animation 使用SVG点击浏览一系列图像；动画化；_Animation_Svg

Animation 使用SVG点击浏览一系列图像；动画化；

animation svg

Animation 使用SVG点击浏览一系列图像；动画化；,animation,svg,Animation,Svg,假设我有一个SVG图像，其中包含几个顶级“g”元素，如下所示： <svg> <g id="id1">...</g> <g id="id2">...</g> <g id="id3">...</g> ... </svg> 第一行应该使所有图像都透明，除了id1图像-效果很好。接下来的两行应该使id1透明，并显示id2——这不起作用。我假设ID较高的透明图像位于较高的级别（z方向），并阻止较低图像的单击事

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

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

第一行应该使所有图像都透明，除了

id1

图像-效果很好。接下来的两行应该使

id1

透明，并显示

id2

——这不起作用。我假设ID较高的透明图像位于较高的级别（z方向），并阻止较低图像的单击事件。但我不知道如何让它们完全“消失”或其他什么

也许有更好的方法来实现这一点…？

你可以用SMIL动画来实现。对于每个状态，我们只需要几个

元素。这两个按钮中的每一个都由单击触发。一个显示下一个组，另一个隐藏最后一个组

此外，如果我建议的方法奏效，我真的不知道如何处理更多的图像。所以，也许有一种完全不同的方法来实现这一点…？我个人会使用javascript，如果它可用的话，有libs来帮助它，比如Snap.svg或svg.js。Chrome不支持SVG动画（有一个多边形填充）。我认为推广的路线是CSS动画或Javascript。Javascript不是一个选项，我必须使用SVG。我有一个SVG图形框，这是我唯一可以修改的地方。它周围的所有HTML都已修复。不过，请稍候。。。这不是重点。。。你的意思是，我应该像前面提到的那样提供SVG图像，然后使用Javascript在“g”之间切换？我能做的。。。但那会怎样呢？我的Javascript很差…你需要一些东西。单击其中的一些东西是你正在单击的元素的id。begin=“click”不起作用。对于FF，问题是它不支持

0s

动画，并且它不默认为

fill=“freeze”

，这是根据1.1规范（不知道SVG2或0s）使用，而不是如果持续时间为0sSVG spec SMIL chapter:dur。。。以演示时间为单位指定简单持续时间的长度。值必须大于0。啊哈！谢谢Kaido和@Robert。我已经修复了SMIL版本。看起来很棒，我会试试的！谢谢抱歉，由于缺乏声誉，无法投票支持你。。。

 <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"/>
...