svgdrawer滤镜指令应用举例（一）
一、效果（单击svg画布可暂停、继续动画）
二、代码
<script>
var flag = false; //动画开关
//加载插件
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('msvg'); //声明画笔
dr.defs('defs');
//制作滤镜 ：图片+融合（图片为融合对象，feImage滤镜加一个animate动画）
dr.f('blend', `
<feImage x="0" y="50" width="120" height="120" href="https://638183.freep.cn/638183/Pic/2022/feidie.gif" result="img1">
<animate attributeName="x" values="0;354;0" dur="20s" repeatCount="indefinite" />
</feImage>
<feBlend mode="hard-light" in="img1" in2="SourceGraphic"></feBlend>
`);
//加载图片（被融合底图）
dr.image('https://638183.freep.cn/638183/small/playbg1.jpg', 0, 0, 474, 316).set('filter', 'url(#blend)');
//画布单击事件 ：关闭、开启动画
msvg.onclick = () => {
dr.play(flag);
flag = !flag;
};
};
</script>
前一篇: 原生lrc歌词同步插件列表
下一篇: fscreen模块：更方便的全屏切换插件
发表评论:
评论列表 [3条]
#3 | 小希 于 2024-10-25 13:39 发布: 好哒，我切手机版，现在可以了～
#2 | 马黑 于 2024-10-25 12:43 发布: 网站有手机版，请在首页进入
#1 | 飞飞 于 2024-10-25 12:28 发布: 看到了外星飞船在移动～手机代码看不全，申请大页面发帖～
