<feDisplacementMap> - SVG | MDN

<feDisplacementMap>

Baseline Large disponibilité

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 <feDisplacementMap> utilise les valeurs de pixel de l'image de in2 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 et yChannelSelector.

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

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface SVGFEDisplacementMapElement.

Exemple

html

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