SVG shadow of transformed element

I want to set a shadow on an element with a transform.

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="1000" height="800">
      <path d="M 0 0 L 50 0 L 50 50 L 0 50 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,100,0)" style="filter: url('#zr-shadow-0');"></path>
      <path d="M 0 0 L 1 0 L 1 1 L 0 1 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(50,0,0,50,100,100)" style="filter: url('#zr-shadow-1');"></path>
      <defs>
          <filter id="zr-shadow-0" x="-10" y="-10" width="20" height="20">
              <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="blue"></feDropShadow>
          </filter>
          <filter id="zr-shadow-1" x="-10" y="-10" width="20" height="20">
              <feDropShadow dx="10" dy="10" stdDeviation="250" flood-color="blue"></feDropShadow>
          </filter>
      </defs>
  </svg>

The first path is not scaled, and its shadow is rendered correctly. But the second path is scaled by 50 times in both x and y direction, and it doesn't show a shadow as expected.

How should I set the filter parameters so that the second path has the same shadow as the first one?

Solution

This is much easier in objectBoundingBox units as the filter scales with the shape. Otherwise you would have to divide the dx, dy and stdDeviation by 50 in the second case.

I've also ajusted the size of your filter as it was far far too big. 20 is 20 times the size of the shape being filtered.

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="1000" height="800">
      <path d="M 0 0 L 50 0 L 50 50 L 0 50 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,100,0)" style="filter: url('#zr-shadow-0');"></path>
      <path d="M 0 0 L 1 0 L 1 1 L 0 1 L 0 0 Z" fill="red" fill-opacity="1" stroke="none" transform="matrix(50,0,0,50,100,100)" style="filter: url('#zr-shadow-1');"></path>
      <defs>
          <filter id="zr-shadow-0" x="0" y="0" width="140%" height="140%" primitiveUnits="objectBoundingBox">
              <feDropShadow dx=".2" dy=".2" stdDeviation=".1" flood-color="blue"></feDropShadow>
          </filter>
          <filter id="zr-shadow-1" x="0" y="0" width="140%" height="140%" primitiveUnits="objectBoundingBox">
              <feDropShadow dx=".2" dy=".2" stdDeviation=".1" flood-color="blue"></feDropShadow>
          </filter>
      </defs>
  </svg>