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>

马黑黑

说明：

一、关于 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动画就是针对元素属性的。

梦江南

欣赏老师新作，辛苦了！

马黑黑

梦江南 发表于 2024-10-25 17:42
欣赏老师新作，辛苦了！

红影

去搜了一下，SVG 滤镜的滤镜很多，这里专门讲的是和图片融合的feBlend滤镜，而且还用了个动图，用实例证明了图片可以是动画。
这个里面有图片融合对象，还有别融合的底图，放在一起，十分清楚。

红影

这个还有svg的封装，让实体元素标签 image的加载很方便。
黑黑辛苦，学习了

花飞飞

这个贴子用两张图片滤镜融合，其中飞船小图片进行水平（0;354;0）无限循环运动~
看着效果完美且简单，完成过程却新颖又巧妙

花飞飞

关于 feBlend 滤镜，<feBlend mode="hard-light" in="img1" in2="SourceGraphic"></feBlend>
用了强光，mode="hard-light这是个滤镜名称，这个能明白。
后面两个是看了老师的说明，IN和IN2一张是飞船图片，一张是背景图片。。那么，这两个是不是属于必备的两个属性，缺一不可。。
SourceGraphic这个单词好长啊，是自定义的名称还是固定的名称。

花飞飞

这个动画的开关也好简洁，看着很舒适~~

马黑黑

花飞飞 发表于 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
有些应用场景，处于某种需要，它不呈现真实的对象，大家看到的是映射的。比方说沙盒机制，或影子系统机制 ...

看着好像懂了又不太明白。这个得举个例子。。
贴子都是创建的吧，不存在映射。。。

马黑黑

花飞飞 发表于 2024-10-26 20:58
看着好像懂了又不太明白。这个得举个例子。。
贴子都是创建的吧，不存在映射。。。

在线工具就是映射的，不映射的话实时画面渲染动画时有点问题。因为这是在同一个页面一边输代码一边演示，mxl的工作机制可能存在一个时间差，部分svg动画就会时有时无，所以用了一个映射。

花飞飞

马黑黑 发表于 2024-10-26 22:57
在线工具就是映射的，不映射的话实时画面渲染动画时有点问题。因为这是在同一个页面一边输代码一边演示， ...

在线工具的映射这么好用，保证流畅显示的节奏。。看来这个映射作用还挺大。。。

马黑黑

花飞飞 发表于 2024-10-27 13:11
在线工具的映射这么好用，保证流畅显示的节奏。。看来这个映射作用还挺大。。。

有时候映射是必须的

花飞飞

马黑黑 发表于 2024-10-27 16:56
有时候映射是必须的

有时候是啥时候。。有动画的时候吧。。

马黑黑

花飞飞 发表于 2024-10-27 22:01
有时候是啥时候。。有动画的时候吧。。

看需要

花飞飞

马黑黑 发表于 2024-10-27 22:54
看需要

不需要的时候是什么时候一旦缺了就进行不下去的时候

马黑黑

花飞飞 发表于 2024-10-29 09:43
不需要的时候是什么时候一旦缺了就进行不下去的时候

坑的吧