变换元素的 SVG 阴影答案

【问题标题】：SVG shadow of transformed element变换元素的 SVG 阴影
【发布时间】：2017-11-21 02:43:33
【问题描述】：

我想通过变换在元素上设置阴影。

  <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 倍，并没有像预期的那样显示阴影。

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

【问题讨论】：

标签： svg svg-filters svg-transforms

【解决方案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>

【讨论】：