Displacement map filter not working on rotated object

Question

I am trying to make mirrored pattern, but when I add displacement filter, it seems it only works on first and fourth quandrant. Am I overlooking some beginner mistake or is this behavior expected?

<svg width="500px" height="500px">
    <defs>
        <clipPath id="clip">
          <rect x="0" y="0" width="50%" height="50%"/>
        </clipPath>

        <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4"  patternTransform="scale(20) rotate(0)">
          <path d="M-1,1 l2,-2
                 M0,4 l4,-4
                 M3,5 l2,-2"
              style="stroke:red; stroke-width:1" />
        </pattern>

        <symbol id="quarter">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" clip-path="url(#clip)"/>
        </symbol>

        <filter id="noise" x="0%" y="0%" width="100%" height="100%">
                <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
        </filter>
    </defs>


    <g filter="url(#noise)">
      <use xlink:href="#quarter"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(90)"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(180)"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(270)"/>
    </g>
</svg>

Answer 1

You're just missing an xChannelSelector or yChannelSelector - one of which is required.

(Update - as you mention in the comment, when you leave this out, it defaults to using the alpha channel in both X and Y - so it will shift everything up and down the top/left bottom/right diagonal axis - so solid color diagonal lines with this orientation will only show distortions at their starting and finishing edges).

If you're not going to process the feTurbulence in some way after you generate it, then any one of the channels (RGBA) works as a displacement source - since Perlin noise is equally noisy in all four channels.

(You don't need to use the R channel because your shapes are red - that's backwards - the channel selector applies to your noise input, not your the shape you want to apply it to.)

<svg width="500px" height="500px">
    <defs>
        <clipPath id="clip">
          <rect x="0" y="0" width="50%" height="50%"/>
        </clipPath>

        <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4"  patternTransform="scale(20) rotate(0)">
          <path d="M-1,1 l2,-2
                 M0,4 l4,-4
                 M3,5 l2,-2"
              style="stroke:red; stroke-width:1" />
        </pattern>

        <symbol id="quarter">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" clip-path="url(#clip)"/>
        </symbol>

        <filter id="noise" x="0%" y="0%" width="100%" height="100%">
                <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
    </defs>


    <g filter="url(#noise)">
      <use xlink:href="#quarter"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(90)"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(180)"/>
      <use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(270)"/>
    </g>
</svg>