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

＆＃13;

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

＆＃13;

转换元素的SVG阴影

1 个答案: