下面的代码片段显示了我想做的事情。但也存在一些问题:
- 不使用SMIL如何制作这个动画?
SMIL 已被弃用,并且浏览器支持较差。
- 如何使黑色路径穿过蓝色路径的右端?
红色、蓝色和绿色路径的长度相同。
- 动画应该重复向下-向上-向下-向上,依此类推。
第一个问题是主要问题。我对其他问题有一些想法,但在解决第一个问题之前我无法应用它们。我写了其他问题只是为了澄清我在做什么。
http://jsfiddle.net/2yLxpjaw/2/
svg {
outline: 1px solid silver;
}
path {
opacity: .25;
fill: none;
stroke-width: 16;
stroke-linecap: round;
}
#test {
opacity: .5;
}
<svg width="200" height="200">
<path stroke="red" d="m 22 100 q 68 0 136 -68" />
<path stroke="blue" d="m 22 100 q 68 0 156 0" />
<path stroke="green" d="m 22 100 q 68 0 136 68" />
<path id="test" stroke="black" d="m 22 100 q 68 0 136 -68" />
<animate xlink:href="#test"
attributeName="d"
from="m 22 100 q 68 0 136 -68"
to="m 22 100 q 68 0 136 68"
dur="3s"
repeatCount="indefinite" />
</svg>
PS: 同样的问题用俄语。
据我所知,仅使用 svg 无法完成此操作。 CSS 也没有。
您可以使用 SVG 动画库,例如snap.svg或者你可以编写自己的小 JS 动画(例如使用 RequestAnimationFrame)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)