svg:用feDropShadow滤镜做文本阴影

马黑黑

<svg style="width: 800px; height: 160px;">
	<defs>
		<filter id="shadow">
			<feDropShadow dx="-3" dy="-3" stdDeviation="2" flood-color="#000" flood-opacity=".6"/>
		</filter>
	</defs>
	<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="white" stroke="none" font-family="'微软雅黑'" font-weight="bold" font-size="100" font-weight="bold" filter="url(#shadow)">SVG文本阴影
		<animate attributeName="fill" values="white;silver;white" dur="5s" repeatCount="indefinite" />
	</text>	
</svg>

效果：

马黑黑

代码解释：

2~6行：设置滤镜，使用 <defs> 标签包裹所有要使用的滤镜。滤镜需要在 <filter> 标签内设定，filter 的 id 将是实体元素引用的依据。feDropShadow 滤镜，fe 是滤镜前缀，DropShadow 是投下阴影，顾名思义，feDropShadow 滤镜就是地道的设置阴影的滤镜，CSS 的 filter 中 dropshadow 就是借用了这个。feDropShadow 滤镜参数不多，dx、dy 是公共参数，x、y方向偏移量，这里指阴影偏移量；flood-color 属性用于设定阴影颜色，flood-opacity 用于设定阴影不透明度、取值范围 0~1 或 0%~100% 都可以。

7行：text标签，要显示的文本就放在这里。text标签属性中，x、y是text的起点XY坐标，text-anchor是文本水平对齐，dominant 是文本垂直对齐，fill 是文本填充色，stroke 是文本描边色，还可以加 stroke-width 设置描边厚度、stroke-linejoin 设置描边交接处的形状等等，font-* 系列属性用于设置字体方面，其中 font-family 属性支持备选字体，例如 font-family="'微软雅黑', '宋体'" ，注意用汉字或多个单词表达的字体名称需要额外加引号（外层是双引号，里层则用单引号，反之亦然）。最后，非常重要的，引用阴影滤镜，使用 filter 属性、属性值为前面设计的 filter 滤镜 id，注意观察滤镜 id 的引用方法。

8行：加一个动画，动画利用 text 标签的 fill 属性，来回变换文本的填充值。

马黑黑

feDropShadow滤镜其他svg实体元素的阴影

红影

讲到svg滤镜了，黑黑说这块是比较难的部分。
还好阴影不算太难，被黑黑讲解得很透彻

红影

文本的填充色是变化的，真漂亮

红影

不知道加上描边会不会对阴影设置有影响。我去试试。。。

花飞飞

马黑黑 发表于 2024-9-27 20:05
代码解释：

2~6行：设置滤镜，使用  标签包裹所有要使用的滤镜。滤镜需要在  标签内设定，filter 的 id  ...

这个解释的好清楚，滤镜这么厉害。。。
阴影效果无数的可能。。
可以适应不同颜色的背景。。

小辣椒

马黑黑 发表于 2024-9-27 20:05
代码解释：

2~6行：设置滤镜，使用  标签包裹所有要使用的滤镜。滤镜需要在  标签内设定，filter 的 id  ...

这个要学习一下

红影

马黑黑

花飞飞 发表于 2024-9-27 21:15
这个解释的好清楚，滤镜这么厉害。。。
阴影效果无数的可能。。
可以适应不同颜色的背景。。

css的filter是参考了这个API

马黑黑

红影 发表于 2024-9-27 20:36
讲到svg滤镜了，黑黑说这块是比较难的部分。
还好阴影不算太难，被黑黑讲解得很透彻

滤镜过去讲过一些的

红影

马黑黑 发表于 2024-9-27 22:00
滤镜过去讲过一些的

是的，我记得专门有个帖子讲这个的。

马黑黑

红影 发表于 2024-9-27 22:08
是的，我记得专门有个帖子讲这个的。

滤镜实际上也不太多，日常用到的也不太复杂

红影

马黑黑 发表于 2024-9-27 22:09
滤镜实际上也不太多，日常用到的也不太复杂

还记得那个柏林噪声做水波的，特别神奇。

花飞飞

马黑黑 发表于 2024-9-27 21:59
css的filter是参考了这个API

艾玛，什么是API

马黑黑

花飞飞 发表于 2024-9-27 22:12
艾玛，什么是API

api就是接口，就像充电器接口type C一样。很多语言都打通了关口，大家共用，唯独果机的不行。

现在，阿里粑粑、企鹅系，也都打通了支付API，你在天猫可以用微信支付了

马黑黑

红影 发表于 2024-9-27 22:11
还记得那个柏林噪声做水波的，特别神奇。

那个很消耗资源

红影

马黑黑 发表于 2024-9-27 22:18
那个很消耗资源

但很神奇

花飞飞

马黑黑 发表于 2024-9-27 22:15
api就是接口，就像充电器接口type C一样。很多语言都打通了关口，大家共用，唯独果机的不行。

现在， ...

原来是这样。。给个标准接口。大家都能用。。这词儿见过，不明白，现在知道了。
css的filter滤镜用的是SVG的滤镜标准为参考。。
我看都挺先进的，原来有先有后。。

马黑黑

花飞飞 发表于 2024-9-27 22:30
原来是这样。。给个标准接口。大家都能用。。这词儿见过，不明白，现在知道了。
css的filter滤 ...

filter滤镜用于web最先在svg开始