<feMorphology>
La primitive de filtre SVG <feMorphology>
est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement.
Contexte d'utilisation
Catégories | Élément de primitive de filtre |
---|---|
Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre :<animate> , <set> (en-US) |
Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cet élément implémente l'interface SVGFEMorphologyElement
(en-US).
Exemples
Sur du contenu 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">Texte normal</text>
<text id="thin" y="2em">Texte mince</text>
<text id="thick" y="3em">Text gras</text>
</svg>
CSS
text {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
Sur du contenu 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>Texte normal</p>
<p id="thin">Texte mince</p>
<p id="thick">Text gras</p>
CSS
p {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
Spécifications
Specification |
---|
Filter Effects Module Level 1 # feMorphologyElement |
Compatibilité des navigateurs
BCD tables only load in the browser