我正在嘗試在 SVG<defs>元素中構建一個影像，以用于in2置換貼圖過濾器的屬性。但是，置換貼圖過濾器不會扭曲它所應用到的元素。
置換貼圖過濾器被應用于網格圖案，以便我可以看到置換是如何作業的：
<svg viewBox="0 0 400 400" width="400" height="400">
<defs>
<pattern id="grid" viewBox="0,0,10,10" width="2.5%" height="2.5%">
<rect x="0" y="0" width="1" height="10"/>
<rect x="0" y="0" width="10" height="1"/>
</pattern>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#grid)"/>
</svg>我打算用作in2置換貼圖屬性的影像很復雜。當我只是通過<feImage>過濾器中的一個元素參考它，并將該過濾器應用到網格模式時，我會看到我構建的影像，正如預期的那樣：
<svg viewBox="0 0 400 400" width="400" height="400">
<defs>
<linearGradient id="gradientRed">
<stop offset="0%" stop-color="rgba(255,0,0,0)"/>
<stop offset="100%" stop-color="rgba(255,0,0,1)"/>
</linearGradient>
<linearGradient id="gradientGreen" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(0,255,0,0)"/>
<stop offset="100%" stop-color="rgba(0,255,0,1)"/>
</linearGradient>
<rect id="rectRed" width="400" height="400" fill="url(#gradientRed)"/>
<rect id="rectGreen" width="400" height="400" fill="url(#gradientGreen)"/>
<rect id="rectBlack" width="400" height="400" fill="black"/>
<filter id="filterIdentity">
<feImage result="imageRed" href="#rectRed" x="0" y="0" width="400" height="400"/>
<feImage result="imageGreen" href="#rectGreen" x="0" y="0" width="400" height="400"/>
<feImage result="imageBlack" href="#rectBlack" x="0" y="0" width="400" height="400"/>
<feBlend mode="screen" in="imageRed" in2="imageGreen" result="imageRedGreen"/>
<feBlend mode="screen" in="imageRedGreen" in2="imageBlack"/>
</filter>
<mask id="maskCircle">
<rect width="400" height="400" fill="black"/>
<circle cx="200" cy="200" r="200" fill="white"/>
</mask>
<g id="shapeIdentity">
<rect width="400" height="400" fill="black"/>
<rect width="400" height="400" filter="url(#filterIdentity)" mask="url(#maskCircle)"/>
</g>
<filter id="filterDisplace">
<feImage result="imageDisplace" href="#shapeIdentity" x="0" y="0" width="400" height="400"/>
</filter>
<pattern id="grid" viewBox="0,0,10,10" width="2.5%" height="2.5%">
<rect x="0" y="0" width="1" height="10"/>
<rect x="0" y="0" width="10" height="1"/>
</pattern>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#grid)" filter="url(#filterDisplace)"/>
</svg>但是，當我使用相同的<feImage>元素作為元素的in2屬性時<feDisplacementMap>，過濾器不會扭曲它所應用的網格圖案。
<svg viewBox="0 0 400 400" width="400" height="400">
<defs>
<linearGradient id="gradientRed">
<stop offset="0%" stop-color="rgba(255,0,0,0)"/>
<stop offset="100%" stop-color="rgba(255,0,0,1)"/>
</linearGradient>
<linearGradient id="gradientGreen" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(0,255,0,0)"/>
<stop offset="100%" stop-color="rgba(0,255,0,1)"/>
</linearGradient>
<rect id="rectRed" width="400" height="400" fill="url(#gradientRed)"/>
<rect id="rectGreen" width="400" height="400" fill="url(#gradientGreen)"/>
<rect id="rectBlack" width="400" height="400" fill="black"/>
<filter id="filterIdentity">
<feImage result="imageRed" href="#rectRed" x="0" y="0" width="400" height="400"/>
<feImage result="imageGreen" href="#rectGreen" x="0" y="0" width="400" height="400"/>
<feImage result="imageBlack" href="#rectBlack" x="0" y="0" width="400" height="400"/>
<feBlend mode="screen" in="imageRed" in2="imageGreen" result="imageRedGreen"/>
<feBlend mode="screen" in="imageRedGreen" in2="imageBlack"/>
</filter>
<mask id="maskCircle">
<rect width="400" height="400" fill="black"/>
<circle cx="200" cy="200" r="200" fill="white"/>
</mask>
<g id="shapeIdentity">
<rect width="400" height="400" fill="black"/>
<rect width="400" height="400" filter="url(#filterIdentity)" mask="url(#maskCircle)"/>
</g>
<filter id="filterDisplace">
<feImage result="imageDisplace" href="#shapeIdentity" x="0" y="0" width="400" height="400"/>
<feDisplacementMap in="SourceGraphic" in2="imageDisplace" scale="20" yChannelSelector="R" xChannelSelector="G"/>
</filter>
<pattern id="grid" viewBox="0,0,10,10" width="2.5%" height="2.5%">
<rect x="0" y="0" width="1" height="10"/>
<rect x="0" y="0" width="10" height="1"/>
</pattern>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#grid)" filter="url(#filterDisplace)"/>
</svg>這里發生了什么？
uj5u.com熱心網友回復：
好吧，您被 Chrome 中的錯誤絆倒了。這是一個在 Chrome 中作業的版本，它通過將您的置換圖影像行內為一個單獨的 SVG 片段，并將其作為一個資料 URI 提供給 feImage。請注意這里的語法不正確 - 但正確的語法 {xlink:href = url(...)} 不起作用。（注意 - 這在 Firefox 中不起作用，因為 Firefox 不接受 feImage 的片段參考。）
<svg viewBox="0 0 400 400" width="400" height="400">
<defs>
<filter id="filterDisplace">
<feImage result="imageDisplace" xlink:href="data:image/svg xml," x="0" y="0" width="400" height="400"/>
<feDisplacementMap in="SourceGraphic" in2="imageDisplace" scale="20" yChannelSelector="R" xChannelSelector="G"/>
</filter>
<pattern id="grid" viewBox="0,0,10,10" width="2.5%" height="2.5%">
<rect x="0" y="0" width="1" height="10"/>
<rect x="0" y="0" width="10" height="1"/>
</pattern>
</defs>
<g filter="url(#filterDisplace)">
<rect x="0" y="0" width="400" height="400" fill="url(#grid)" />
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/394445.html