<feDisplacementMap>
<feDisplacementMap> SVG 濾鏡圖元使用來自 in2 的影像的畫素值，來空間位移來自 in 的影像。
變換的公式如下所示：
P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
其中 P(x,y) 是輸入影像，即 in，而 P'(x,y) 是目標影像。XC(x,y) 和 YC(x,y) 是由 xChannelSelector 和 yChannelSelector 指定的通道的分量值。
與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。
使用語境
屬性
DOM 介面
此元素實現了 SVGFEDisplacementMapElement 介面。
示例
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" filter="url(#displacementFilter)" />
</svg>
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # feDisplacementMapElement |
瀏覽器相容性
載入中…