<feMorphology>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<feMorphology>
SVG 滤镜原语用于对输入图像进行腐蚀或膨胀。它的用途尤其体现在加粗或变细效果上。
使用上下文
属性
DOM 接口
此元素实现了 SVGFEMorphologyElement
接口。
示例
过滤 SVG 内容
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
<text y="1em">普通文本</text>
<text id="thin" y="2em">细文本</text>
<text id="thick" y="3em">粗文本</text>
</svg>
CSS
css
text {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
过滤 HTML 内容
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
</svg>
<p>普通文本</p>
<p id="thin">细文本</p>
<p id="thick">粗文本</p>
CSS
css
p {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
规范
Specification |
---|
Filter Effects Module Level 1 # feMorphologyElement |
浏览器兼容性
BCD tables only load in the browser