femorphology通过operator（dilate/erode）控制膨胀或腐蚀方向，radius设定膨胀强度（单值统一、双值定向），单位为用户坐标，受viewbox缩放影响；filter不生效主因是目标无渲染尺寸、滤镜id不匹配或裁剪区域过小。
能直接用，但必须满足三个硬性条件：滤镜定义正确、目标元素有渲染尺寸、filter: url(#id) 引用方式唯一可靠。
feMorphology 的 operator 和 radius 怎么配
feMorphology 只有两个关键参数：operator 决定方向，radius 控制强度。
-
operator="dilate"是向外膨胀（加粗轮廓），适合给图标加边、强化文字边缘；operator="erode"是向内腐蚀（削薄轮廓），可用于弱化描边、收缩不规则图形 -
radius单值如radius="2"表示 x/y 方向都影响 2 单位；双值如radius="3 1"表示横向更宽、纵向更窄，可做单向拉伸效果 -
radius="0"等效于无操作；负值非法，浏览器会静默截断为 0 - 数值单位是“用户坐标”，不是像素——所以实际膨胀量取决于 SVG 的
viewBox缩放比例，viewBox="0 0 100 100"下radius="2"比viewBox="0 0 10 10"下的同样值影响小得多
为什么 filter: url(#morph) 不生效
90% 的失败不是语法错，而是三类结构性问题：
- 目标元素没尺寸：
<div> 或 <code><span></span>默认 inline，即使写了filter: url(#morph)也无效；必须加display: block或inline-block，且显式设width/height - 滤镜定义缺失或 ID 不匹配：
<filter id="morph"><femorphology operator="dilate" radius="2"></femorphology></filter>必须放在<svg><defs></defs></svg>内，且url(#morph)中的morph必须和id完全一致（大小写敏感） - 滤镜裁剪区域太小：默认
x="0%" y="0%" width="100%" height="100%"，膨胀后图形边缘会被切掉；建议扩到x="-20%" y="-20%" width="140%" height="140%" - 核心思路：用
operator="dilate"膨胀原图，再用<feflood> + <fecomposite></fecomposite></feflood>上色，最后用<femerge></femerge>叠在原图上 - 关键点在于膨胀后的“边”要独立着色：
<femorphology operator="dilate" radius="1" result="outline"></femorphology>→<feflood flood-color="#333" result="border"></feflood>→<fecomposite in="border" in2="outline" operator="in"></fecomposite> - 必须确保
result名称唯一，且后续in引用准确；漏写result或拼错名，整条链就中断，但浏览器不会报错 - 如果原图是透明背景 PNG 或 CSS 生成的 clip-path 图形，
SourceAlpha输入源可能为空，此时应改用SourceGraphic并确保其有填充色
如何用 feMorphology 给不规则图形加实边框
这是最典型也最容易翻车的场景——不能靠 drop-shadow（带模糊），也不能靠 transform: scale()（难对齐）。
真正麻烦的不是写法，而是 radius 值对不同 viewBox 和缩放层级的实际影响不直观——同一值在高密度图标里可能刚够描边，在大尺寸 banner 里却几乎看不出变化。调试时建议先固定 viewBox，再微调 radius，别一上来就套用别人代码里的数字。
