Mic*_*any 5 graphics svg svg-filters
我一直试图生成一个特定的feDisplacementMap并且失败了.我相信这是因为我对这种机制有一个根本的误解.SVG 1.1规范说:
此滤镜基元使用来自"in2"的图像中的像素值来从"in"空间移位图像.这是要执行的转换:
P'(x,y)< - P(x +标度*(XC(x,y) - .5),y +标度*(YC(x,y) - .5))其中P(x,y)是输入图像,'in',P'(x,y)是目的地.XC(x,y)和YC(x,y)是xChannelSelector和yChannelSelector指定的通道的组件值.例如,要使用'in2'的R分量来控制x中的位移和Image2的G分量来控制y中的位移,请将xChannelSelector设置为"R"并将yChannelSelector设置为"G".
通过我的阅读,这意味着中性灰色图像应该导致没有净像素移动.在尺度= 50的滤波器中的Aka,100,100的像素应该从(100 + 50*(0.5-0.5),100 + 50*(0.5-0.5))= 100,100获得其新值.但是,当我尝试使用灰度时,它会将像素映射到源图像的左侧和左侧.
<svg width="800px" height="600px" >
<defs>
<g id="displacerect">
<rect x="50" y="50" width="300" height="300" fill="rgb(127, 127, 127)"/>
<rect x="90" y="90" width="50" height="50" fill="red">
</rect>
</g>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgb(255,255,0)" stop-opacity="1" />
<stop offset="100%"stop-color="rgb(255,0,0)" stop-opacity="1" />
</linearGradient>
<filter id="displaceME" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="#displacerect" result="displaceImage"/>
<feDisplacementMap scale="125" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="displaceImage"/>
</filter>
</defs>
<g filter="url(#displaceME)">
<rect x="50" y="50" width="300" height="300" fill="url(#grad1)"/>
</g>
<use xlink:href="#displacerect" x="400"/>
</svg>Run Code Online (Sandbox Code Playgroud)
根据其他消息来源:ACTUAL中性位移图应该是这个图像:
我可以在您的示例中看到至少一个错误。
在您的文件中,<feDisplacementMap>您正在使用 引用您的位移图像 ( in2) in2="displacerect"。但是没有具有该结果值的过滤器基元。我相信你的意思in2="displaceImage"是?