<feDisplacementMap>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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
<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