femorphology

该<feMorphology>原语SVG滤波器用来腐蚀或扩张输入图像。特别是在膨胀或收缩效果方面，这是有用的。

用法上下文

分类	过滤基元
允许的内容	以任意顺序包含以下任意数量的元素：<animate>，<set>

属性

全局属性

Core attributes

Presentation attributes

Filter primitive attributes

class

style

具体属性

in

operator

radius

DOM接口

这个元素实现了SVGFEMorphologyElement接口。

过滤SVG内容

SVG

<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">Normal text</text>
  <text id="thin" y="2em">Thinned text</text>
  <text id="thick" y="3em">Fattened text</text>
</svg>

CSS

text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}

过滤HTML内容

SVG

<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>Normal text</p>
<p id="thin">Thinned text</p>
<p id="thick">Fattened text</p>

CSS

p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}

产品规格

Specification	Status	Comment
Filter Effects Module Level 1The definition of '<feMorphology>' in that specification.	Working Draft	No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<feMorphology>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	4.0 (2.0)	(Yes)	9.0	?
On HTML elements	No support	?	(Yes)	No support	No support	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?
On HTML elements	?	?	?	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2019-12-27