<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 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

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

BCD tables only load in the browser