SVG shadow of transformed element

Question

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?

score 3 · Accepted Answer · answered Nov 21 '17 at 03:48

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>

SVG shadow of transformed element

1 Answers1