变形元素的 SVG 阴影

Question

我想在具有变换的元素上设置阴影。

  <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>

第一条路径未缩放，其阴影渲染正确。但是第二条路径在x和y方向都被缩放了50倍，并没有像预期的那样显示阴影。

如何设置滤镜参数，使第二条路径与第一条路径有相同的阴影？

Answer 1

这在 objectBoundingBox 单位中要容易得多，因为过滤器会随形状缩放。否则，在第二种情况下，您必须将 dx、dy 和 stdDeviation 除以 50。

我还调整了过滤器的大小，因为它太大了。 20 是被过滤形状大小的 20 倍。

  <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 阴影

SVG shadow of transformed element

svg

svg-filters

svg-transforms