马黑黑 发表于 2023-10-6 12:12

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

本帖最后由 马黑黑 于 2023-10-6 12:14 编辑 <br /><br /><svg width="700" height="300" style="font-size: 60px; font-family: sans-serif; letter-spacing: 8px; border: 1px solid gray; background: white;">
    <filter id="thin">
      <feMorphology operator="erode" radius="1"/>
    </filter>
    <filter id="fat">
      <feMorphology operator="dilate" radius="2"/>
    </filter>
    <text x= "10" y="70px">正常：花潮论坛</text>
    <text x= "10" y="170px" style="filter: url(#thin);">瘦身：花潮论坛</text>
    <text x= "10" y="270px" style="filter: url(#fat);">增肥：花潮论坛</text>
</svg>

马黑黑 发表于 2023-10-6 12:20

代码
<svg width="700" height="300" style="font-size: 60px; font-family: sans-serif; letter-spacing: 8px; border: 1px solid gray; background: white;">
    <filter id="thin">
      <feMorphology operator="erode" radius="1"/>
    </filter>
    <filter id="fat">
      <feMorphology operator="dilate" radius="2"/>
    </filter>
    <text x= "10" y="70px">正常：花潮论坛</text>
    <text x= "10" y="170px" style="filter: url(#thin);">瘦身：花潮论坛</text>
    <text x= "10" y="270px" style="filter: url(#fat);">增肥：花潮论坛</text>
</svg>
feMorphology 滤镜用来腐蚀（erode）或扩张（dilate）图像，依据 operator 参数值决定滤镜的作用，并通过 radius （半径）属性设置腐蚀或扩张尺寸。上述代码，滤镜1 id 为 thin，它用于腐蚀，对文本起瘦身作用；滤镜 2 id 为 fat，用于扩张，对文本起增肥作用。

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

马黑黑 发表于 2023-10-6 12:42

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

红影 发表于 2023-10-6 14:25

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

红影 发表于 2023-10-6 14:25

又是新知识，来学习了{:4_187:}

冬天的雨 发表于 2023-10-6 18:12

马老师就是高知，冬雨学习了{:4_199:}

白开水 发表于 2023-10-6 19:18

只有欣赏的份

小辣椒 发表于 2023-10-6 20:26

黑黑又分享新的东东了{:4_199:}

马黑黑 发表于 2023-10-6 23:27

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

晚上嚎

马黑黑 发表于 2023-10-6 23:47

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

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

马黑黑 发表于 2023-10-6 23:47

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

{:4_190:}

马黑黑 发表于 2023-10-6 23:48

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

{:4_191:}

红影 发表于 2023-10-7 10:10

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

这个从来没见过呢。

马黑黑 发表于 2023-10-7 10:53

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

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

红影 发表于 2023-10-7 15:09

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

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

马黑黑 发表于 2023-10-7 17:38

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

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

红影 发表于 2023-10-7 20:02

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

辛苦黑黑了{:4_187:}

马黑黑 发表于 2023-10-7 21:55

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

我估计学的更辛苦

红影 发表于 2023-10-7 22:01

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

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

马黑黑 发表于 2023-10-7 22:01

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

老一套了
页: [1] 2
查看完整版本: svg: 文本瘦身与增肥（feMorphology滤镜简介）