Nos bénévoles n'ont pas encore traduit cet article en Français. Aidez-nous à réaliser cette tâche !
The <feMorphology> SVG filter primitive is used to erode or dilate the input image. It's usefulness lies especially in fattening or thinning effects.
Usage context
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <set> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEMorphologyElement interface.
Filtering SVG content
SVG
<svg xmlns="https://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);
}
Filtering HTML content
SVG
<svg xmlns="https://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);
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The 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 |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 4.0 (2.0) | (Yes) | 9.0 | ? |
| On HTML elements | No support | (Yes) | No support | No support | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
| On HTML elements | ? | ? | ? | ? | ? |
The chart is based on these sources.