利用SVG clip-path显示动画图片
需求:手头的动画资源大部分为同一图片的动画集合,而SVG中没有能够直接利用的办法
解决方法:将图片显示在SVG中,并根据帧数,动态生成clip-path,选择需要的部分,并根据选择部分的偏移量动态修改SVG图片的坐标,实现动画效果
var flag=0;
function onCircleClick(evt)
{ var sprite = document.getElementById("sprite");
if(flag == 0)
{
sprite.setAttributeNS(null,"x", "300");
sprite.setAttributeNS(null,"clip-path", "url(#MyClip2)");
flag = 1;
}
else
{
sprite.setAttributeNS(null,"x", "350");
sprite.setAttributeNS(null,"clip-path", "url(#MyClip1)");
flag = 0;
}
}
<svg id="svg" style="position:absolute" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="none">
<defs>
<clipPath id="MyClip1" >
<path d="M 370 270 l 60 0 l 0 60 l -60 0 Z" />
</clipPath>
<clipPath id="MyClip2" >
<path d="M 385 270 l 60 0 l 0 60 l -60 0 Z" />
</clipPath>
</defs>
<image id="sprite" οnclick="onCircleClick(evt)" clip-path="url(#MyClip1)" x="350" y="270" width="500" height="60" pointer-events="all"
xlink:href="res/sprite.png"></image>
</svg>