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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
On HTML elementsChrome Support complet OuiEdge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
inChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
operatorChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
radiusChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,