<feDisplacementMap>

La primitive de filtre SVG <feDisplacementMap> utilise les valeurs de pixel de l'image de in2 (en-US) pour déplacer spatialement l'image de in.

La formule utilisée pour la transformation est comme suit:

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

où P(x,y) est l'image en entrée, in, et P'(x,y) est la destination. XC(x,y) et YC(x,y) sont les valeurs des composants du canal désigné par xChannelSelector (en-US) et yChannelSelector (en-US).

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 SVGFEDisplacementMapElement (en-US).

Exemple

<svg width="200" height="200" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.05"
        numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="G"/>
  </filter>

  <circle cx="100" cy="100" r="100"
      style="filter: url(#displacementFilter)"/>
</svg>

Spécifications

Specification
Filter Effects Module Level 1
# feDisplacementMapElement

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi