svg: 文本瘦身与增肥（feMorphology滤镜简介）

马黑黑

马黑黑

代码

1. <svg width="700" height="300" style="font-size: 60px; font-family: sans-serif; letter-spacing: 8px; border: 1px solid gray; background: white;">
   
2.     <filter id="thin">
   
3.         <feMorphology operator="erode" radius="1"/>
   
4.     </filter>
   
5.     <filter id="fat">
   
6.         <feMorphology operator="dilate" radius="2"/>
   
7.     </filter>
   
8.     <text x= "10" y="70px">正常：花潮论坛</text>
   
9.     <text x= "10" y="170px" style="filter: url(#thin);">瘦身：花潮论坛</text>
   
10.     <text x= "10" y="270px" style="filter: url(#fat);">增肥：花潮论坛</text>
    
11. </svg>
    

复制代码

feMorphology 滤镜用来腐蚀（erode）或扩张（dilate）图像，依据 operator 参数值决定滤镜的作用，并通过 radius （半径）属性设置腐蚀或扩张尺寸。上述代码，滤镜1 id 为 thin，它用于腐蚀，对文本起瘦身作用；滤镜 2 id 为 fat，用于扩张，对文本起增肥作用。

文本使用滤镜，text 标签需要捆绑到滤镜 id ，详情请研究后两个 text 标签代码。

马黑黑

radius属性值貌似不支持浮点数

红影

原来这个是svg里专用的，记得黑黑以前讲过css里的设置。

红影

又是新知识，来学习了

冬天的雨

马老师就是高知，冬雨学习了

白开水

只有欣赏的份

小辣椒

黑黑又分享新的东东了

马黑黑

小辣椒 发表于 2023-10-6 20:26
黑黑又分享新的东东了

晚上嚎

马黑黑

红影 发表于 2023-10-6 14:25
原来这个是svg里专用的，记得黑黑以前讲过css里的设置。

svg滤镜不算太多，但是每一个都很抽象

马黑黑

白开水 发表于 2023-10-6 19:18
只有欣赏的份

马黑黑

冬天的雨 发表于 2023-10-6 18:12
马老师就是高知，冬雨学习了

红影

马黑黑 发表于 2023-10-6 23:47
svg滤镜不算太多，但是每一个都很抽象

这个从来没见过呢。

马黑黑

红影 发表于 2023-10-7 10:10
这个从来没见过呢。

一切处理图像的东东，一般都会有滤镜

红影

马黑黑 发表于 2023-10-7 10:53
一切处理图像的东东，一般都会有滤镜

嗯嗯，看到黑黑也介绍了svg的模糊滤镜。

马黑黑

红影 发表于 2023-10-7 15:09
嗯嗯，看到黑黑也介绍了svg的模糊滤镜。

滤镜倒是不会太多，就是很多很抽象，我将陆续介绍一些大家能接受的

红影

马黑黑 发表于 2023-10-7 17:38
滤镜倒是不会太多，就是很多很抽象，我将陆续介绍一些大家能接受的

辛苦黑黑了

马黑黑

红影 发表于 2023-10-7 20:02
辛苦黑黑了

我估计学的更辛苦

红影

马黑黑 发表于 2023-10-7 21:55
我估计学的更辛苦

哪里，都是教的人辛苦呢，所以古人要求人们尊师重道

马黑黑

红影 发表于 2023-10-7 22:01
哪里，都是教的人辛苦呢，所以古人要求人们尊师重道

老一套了