svg:用feDropShadow滤镜做文本阴影
<div class="hE"><pre id="pre1"><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>
</pre></div>
<p>效果：</p>
<div style="margin:20px auto; text-align: center;" id="sbox"></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
sbox.innerHTML = pre1.innerText;
</script> 代码解释：
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滤镜了，黑黑说这块是比较难的部分。
还好阴影不算太难，被黑黑讲解得很透彻{:4_187:} 文本的填充色是变化的，真漂亮{:4_187:} 不知道加上描边会不会对阴影设置有影响。我去试试。。。 马黑黑 发表于 2024-9-27 20:05
代码解释：
2~6行：设置滤镜，使用标签包裹所有要使用的滤镜。滤镜需要在标签内设定，filter 的 id...
这个解释的好清楚，滤镜这么厉害。。。
阴影效果无数的可能。。{:4_199:}
可以适应不同颜色的背景。。 马黑黑 发表于 2024-9-27 20:05
代码解释：
2~6行：设置滤镜，使用标签包裹所有要使用的滤镜。滤镜需要在标签内设定，filter 的 id...
这个要学习一下
<svg style="width: 400px; height: 160px;">
<defs>
<filter id="shiyan">
<feDropShadow dx="-5" dy="-5" stdDeviation="2" flood-color="#000" flood-opacity=".6"/>
</filter>
</defs>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="MediumTurquoise" stroke="LightSteelBlue" stroke-width="5" font-family="'微软雅黑'" font-weight="bold" font-size="100" font-weight="bold" filter="url(#shiyan)">试验
<animate attributeName="fill" values="MediumTurquoise;LightBLue;MediumTurquoise" dur="4s" repeatCount="indefinite" />
</text>
</svg> 花飞飞 发表于 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{:4_173:} 花飞飞 发表于 2024-9-27 22:12
艾玛，什么是API
api就是接口，就像充电器接口type C一样。很多语言都打通了关口，大家共用，唯独果机的不行。
现在，阿里粑粑、企鹅系，也都打通了支付API，你在天猫可以用微信支付了 红影 发表于 2024-9-27 22:11
还记得那个柏林噪声做水波的，特别神奇。
那个很消耗资源 马黑黑 发表于 2024-9-27 22:18
那个很消耗资源
但很神奇{:4_173:} 马黑黑 发表于 2024-9-27 22:15
api就是接口，就像充电器接口type C一样。很多语言都打通了关口，大家共用，唯独果机的不行。
现在， ...
{:4_173:}原来是这样。。给个标准接口。大家都能用。。这词儿见过，不明白，现在知道了。
css的filter滤镜用的是SVG的滤镜标准为参考。。
我看都挺先进的，原来有先有后。。 花飞飞 发表于 2024-9-27 22:30
原来是这样。。给个标准接口。大家都能用。。这词儿见过，不明白，现在知道了。
css的filter滤 ...
filter滤镜用于web最先在svg开始