svgdrawer滤镜指令应用举例（一）
<p>一、效果（单击svg画布可暂停、继续动画）<br><br></p><p style="text-align: center;"><svg id="msvg" width="474" height="316" style="border: 1px solid gray"></svg></p>
<p>二、代码</p>
<div class="hE"><pre>
<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>
</pre></div>
<script>
var flag = false; //动画开关
//加载插件
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?ver=1';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('msvg'); //声明画笔
//制作滤镜 ：图片+融合（图片为融合对象，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;
};
};
var sc1 = document.createElement('script');
sc1.chartset = 'utf-8';
sc1.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc1);
</script>
本帖最后由 马黑黑 于 2024-10-25 18:06 编辑
说明：
一、关于 f() 指令 : f(fId, fcode);
参数 fId 是 filter 滤镜id标识，必须，例如本例自命名的 “blend"，它将给 filter 标签加上 id="blend" 属性和属性值，作为后续元素引用滤镜的依据；参数 fcode 是滤镜完整HTML（或称XML、svg）代码，如本例的 feImage、feBlend 两个滤镜代码。本指令，f 来源于 filter 头一个字母，它将创建 filter 标签。过去，filter 标签需要放到 defs 标签内，现在，所有现代浏览器都支持 filter 标签脱离 defs 标签，就是说，f() 指令是否 addTo('defs') 无关紧要，这意味着针对本例，第九行代码是多余的，可以不要，不过适时创建defs标签是好的。
二、关于 feImage 滤镜
feImage 滤镜用来加载图片，它有专属的 x、y、width、height、href 等属性，一眼看懂它们的含义。例中的 result 属性是滤镜通用属性，用来指明滤镜表示，相当于其他元素的 id，不过这个标识一般隔离在滤镜之内，是滤镜间彼此识别的标识，本例，result="img1“，img1 就是 feImage 的标识符。
三、关于 feBlend 滤镜
feBlend 滤镜是融合滤镜，它用来指明滤镜的作用对象，用 in 和 in2 属性描述，in="img1" 第一个作用对象是滤镜 feImage（result=“img1），in2="SourceGraphic" 标识第二个作用对象是源图像（即使用滤镜元素的图像）。mode 属性是使用什么融合效果的重要属性，详情可参阅 背景混合模式 background-blend-mode 演示 的 16种 blend-mode 值。
四、引用滤镜
18行代码是svg实体元素标签 image，它加载一张图片，有自己的 x、y、width、height 属性，并通过 set() 指令设置 filter 属性，'url(#blend)' 是svg引用滤镜标准语法，井号不能少，整个 set() 指令讲给 <image ... /> 标签加上 filter 属性，结果为 <image ... filter="url(#blend)" /> 酱紫。
五、例中滤镜缘何可以加入动画
svg滤镜本来就支持动画，因为它有属性，svg动画的 animate动画就是针对元素属性的。
欣赏老师新作，辛苦了！{:4_190:} 梦江南 发表于 2024-10-25 17:42
欣赏老师新作，辛苦了！
{:4_190:} 去搜了一下，SVG 滤镜的滤镜很多，这里专门讲的是和图片融合的feBlend滤镜，而且还用了个动图，用实例证明了图片可以是动画。
这个里面有图片融合对象，还有别融合的底图，放在一起，十分清楚。{:4_187:} 这个还有svg的封装，让实体元素标签 image的加载很方便。
黑黑辛苦，学习了{:4_199:} 这个贴子用两张图片滤镜融合，其中飞船小图片进行水平（0;354;0）无限循环运动~
看着效果完美且简单，完成过程却新颖又巧妙{:4_187:} 关于 feBlend 滤镜，<feBlend mode="hard-light" in="img1" in2="SourceGraphic"></feBlend>
用了强光，mode="hard-light这是个滤镜名称，这个能明白。
后面两个是看了老师的说明，IN和IN2一张是飞船图片，一张是背景图片。。那么，这两个是不是属于必备的两个属性，缺一不可。。
SourceGraphic这个单词好长啊，是自定义的名称还是固定的名称。 这个动画的开关也好简洁，看着很舒适~~{:4_170:} 花飞飞 发表于 2024-10-25 20:58
这个动画的开关也好简洁，看着很舒适~~
用户创建的svg可以用，映射的svg用不了它 马黑黑 发表于 2024-10-25 23:01
用户创建的svg可以用，映射的svg用不了它
我看这个开关很灵光。。。映射的SVG指的是什么来着。。 花飞飞 发表于 2024-10-26 19:21
我看这个开关很灵光。。。映射的SVG指的是什么来着。。
有些应用场景，处于某种需要，它不呈现真实的对象，大家看到的是映射的。比方说沙盒机制，或影子系统机制。 马黑黑 发表于 2024-10-26 20:43
有些应用场景，处于某种需要，它不呈现真实的对象，大家看到的是映射的。比方说沙盒机制，或影子系统机制 ...
看着好像懂了又不太明白。这个得举个例子。。
贴子都是创建的吧，不存在映射。。。{:4_170:} 花飞飞 发表于 2024-10-26 20:58
看着好像懂了又不太明白。这个得举个例子。。
贴子都是创建的吧，不存在映射。。。
在线工具就是映射的，不映射的话实时画面渲染动画时有点问题。因为这是在同一个页面一边输代码一边演示，mxl的工作机制可能存在一个时间差，部分svg动画就会时有时无，所以用了一个映射。 马黑黑 发表于 2024-10-26 22:57
在线工具就是映射的，不映射的话实时画面渲染动画时有点问题。因为这是在同一个页面一边输代码一边演示， ...
在线工具的映射这么好用，保证流畅显示的节奏。。看来这个映射作用还挺大。。。{:4_173:} 花飞飞 发表于 2024-10-27 13:11
在线工具的映射这么好用，保证流畅显示的节奏。。看来这个映射作用还挺大。。。
有时候映射是必须的 马黑黑 发表于 2024-10-27 16:56
有时候映射是必须的
有时候是啥时候。。有动画的时候吧。。{:4_173:} 花飞飞 发表于 2024-10-27 22:01
有时候是啥时候。。有动画的时候吧。。
看需要 马黑黑 发表于 2024-10-27 22:54
看需要
不需要的时候是什么时候{:4_170:}一旦缺了就进行不下去的时候 花飞飞 发表于 2024-10-29 09:43
不需要的时候是什么时候一旦缺了就进行不下去的时候
坑的吧