滤镜通过 operator（erode/dilate）和 radius 参数实现图形轮廓的腐蚀或膨胀，纯声明式、基于 alpha 通道运算，适用于图标强化、文字描边弱化等场景，需合理设置 filter 范围以防裁剪。
SVG 的 <femorphology></femorphology> 滤镜可以对图形轮廓进行“膨胀”（扩张）或“腐蚀”（收缩），本质是基于形态学图像处理的像素邻域运算，不依赖 JavaScript，纯声明式实现，适合图标强化、边缘加粗、文字描边弱化等场景。
feMorphology 的核心参数
operator 和 radius 决定效果方向与强度：
- operator="erode"：腐蚀 —— 向内收缩，减小图形面积，类似“削边”；
- operator="dilate"：扩张 —— 向外膨胀，增大图形面积，类似“加粗”；
-
radius：控制影响范围，单位为用户坐标（非像素），支持单值（x=y）或两个值（
radius="2 1"表示 x 方向 2、y 方向 1）； - radius 值为 0 时无变化；负值不合法，会被截断为 0。
基础用法：嵌入 filter 并应用
需先定义 <filter></filter>，再通过 filter 属性挂载到目标元素上：
<svg width="200" height="100"><defs><filter id="expand" x="-50%" y="-50%" width="200%" height="200%"><femorphology operator="dilate" radius="3"></femorphology></filter><filter id="shrink" x="-50%" y="-50%" width="200%" height="200%"><femorphology operator="erode" radius="2"></femorphology></filter></defs><circle cx="50" cy="50" r="20" fill="#4a90e2" filter="url(#expand)"></circle><text x="100" y="60" font-size="24" fill="#e74c3c" filter="url(#shrink)">SVG</text></svg>
注意：x/y 和 width/height 推荐设为扩展范围（如 ±50%），避免裁剪膨胀后的边缘。
与其它滤镜组合增强效果
<femorphology></femorphology> 常作为预处理步骤，配合模糊、颜色变换等进一步加工：
- 先
dilate再feGaussianBlur→ 实现软边发光； - 先
erode再feOffset+feComposite→ 制作内阴影； - 对文字使用
erode可削弱细笔画，在低分辨率下提升可读性。
实际限制与注意事项
该滤镜作用于 alpha 通道，对透明度敏感：
- 仅对非全透明区域生效，半透明边缘会按 alpha 加权参与计算；
- 不适用于
<image></image>元素的原始像素（需先转为<mask></mask>或用feImage）； - 高 radius 值可能造成锯齿或性能下降，建议 ≤8；
- 在 CSS 中无法直接调用，必须通过 SVG
<filter></filter>定义后引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
