形态滤镜

前端教程SVG

<feMorphology> 形态滤镜用来侵蚀erode(或变细thinning)或扩张dilate(或加粗fattening)输入的图像。

基本语法

<filter id="erode">
  <feMorphology operator="erode" radius="1"/>
</filter>
<filter id="dilate">
  <feMorphology operator="dilate" radius="2"/>
</filter>
<text y="1em">Normal text</text>
<text id="thin" y="2em">Thinned text</text>
<text id="thick" y="3em">Fattened text</text>

• operator="erode | dilate"
  • erode 侵蚀(变细)输入源图片
  • dilate 扩张(加粗)输入源图片
• radius="radius | r_x r_y" 半径
  • 如果是 1 个数值，则 X 轴和 Y 轴半径都是此数值
  • 如果是 2 个数值，则第 1 个表示 X 轴半径，第 2 个表示 Y 轴半径

示例

以下 codepen 演示了 <feMorphology> 的用法：

新窗口打开