The feDisplacementMap element for SVG specifies the pixels values from the image from in2 to spatially displace the image from in.
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
P(x,y) is the input image, in , and P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of the channel designated by the xChannelSelector and yChannelSelector .
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result) Specifies the second input image to the compositing operation.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result) Specifies the displacement scale factor.
Specifies which channel from in2 to use to displace the pixels in in along the x-axis.
Specifies which channel from in2 to use to displace the pixels in in along the y-axis.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="BackgroundImage" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="FillPaint" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="myresult" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceAlpha" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="StrokePaint" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="BackgroundAlpha" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="BackgroundImage" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="FillPaint" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="myresult" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="SourceAlpha" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="StrokePaint" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" xChannelSelector="A"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" xChannelSelector="B"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" xChannelSelector="G"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" xChannelSelector="R"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" yChannelSelector="A"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" yChannelSelector="B"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" yChannelSelector="G"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDisplacementMap scale="100" yChannelSelector="R"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>