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 filtre |
---|---|
Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre:<animate> , <set> |
Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cet élément implémente l'interface SVGFEMorphologyElement
.
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
Spécification | Statut | Commentaire |
---|---|---|
Filter Effects Module Level 1 La définition de '<feMorphology>' dans cette spécification. |
Version de travail | Aucun changement |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<feMorphology>' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feMorphology | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet Oui | Opera Support complet 9 | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet Oui |
On HTML elements | Chrome Support complet Oui | Edge Aucun support Non | Firefox Support complet Oui | IE Aucun support Non | Opera Support complet Oui | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet Oui | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet Oui |
in | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet Oui | Opera Support complet 9 | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet Oui |
operator | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet Oui | Opera Support complet 9 | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet Oui |
radius | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet Oui | Opera Support complet 9 | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue