<feDisplacementMap>
Baseline
Widely available
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
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>
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # feDisplacementMapElement |
Compatibilité des navigateurs
Chargement…