I'm trying to create a scrolling texture using SVG's filter combined with an filter. It's working great, but as you can see in this demo, once the value of dx increases past a certain threshold, the displacement map filter stops rendering.

my filter:

<filter id="displacementFilter" filterUnits="objectBoundingBox" x="-50%" y="-10%" width="500" height="120%">
    <feTurbulence id="turb" type="turbulence" baseFrequency="0.001" numOctaves="5" result="turb1"/>
    <feOffset in="turb1" return="offset" /> 
    <feDisplacementMap in2="offset" in="SourceGraphic" scale="100" xChannelSelector="R" yChannelSelector="G" return="disp1"/>
</filter>

In the demo I've also overlaid the turbulence filter overtop so that you can see that the filter continues to scroll correctly, while the displacement map disappears.

The threshold at which the displacement map disappears seems to changed based on the variables in the other filters, but tends to be between 8000 to 12000.

Does anybody have any idea why this might be happening or how I can fix it?

CodePudding user response：

feTurbulence is usually only painted within the initial filter region. You move that content leftwards with feOffset until it moves so far left it moves out of the original filter region. Change the filter width to something like 300% - and you'll see it scroll out of view immediately.

If you want an infinite, seamless turbulence displacement, this is the wrong method to use. You should use this method after the feTurbulence instead - which does a smooth, looping color transformation.

    <feColorMatrix type="hueRotate" values="0" result="cloud">
    <animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
  </feColorMatrix>

(A few more points - that 500 defined as width is being interpreted as 50000% (so it's a filter region that's 50 times wider than the content. And it doesn't matter in your filter, but it's not "return", it's "result" that stores the output of a filter primitive).