<feMorphology>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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
Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cet élément implémente l'interface SVGFEMorphologyElement.
Exemples
Sur du contenu 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">Texte normal</text>
<text id="thin" y="2em">Texte mince</text>
<text id="thick" y="3em">Text gras</text>
</svg>
CSS
css
text {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
Sur du contenu 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>Texte normal</p>
<p id="thin">Texte mince</p>
<p id="thick">Text gras</p>
CSS
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
Chargement…