为啥这个 SVG 投影过滤器在路径很短时会剪切路径？

Posted 2023-03-28

【中文标题】为啥这个 SVG 投影过滤器在路径很短时会剪切路径？

【英文标题】：Why is this SVG drop shadow filter clipping the path when it's short?为什么这个 SVG 投影过滤器在路径很短时会剪切路径？

【发布时间】：2021-11-01 07:45:20

【问题描述】：

所以我需要一些帮助来了解这个 SVG 发生了什么。

当路径很短并且我为投影应用过滤器时，我会得到一些奇怪的剪辑。路径较长时不会发生。

短路径，有阴影（破损）

路径短，没有阴影

更长的路径，有阴影

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
  <g transform="translate(125,125)">
    <filter id="dropshadow" x="-125" y="-125"  >
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset dx="2" dy="2" result="offsetblur"></feOffset>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"></feFuncA>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <circle
      cx="0"
      cy="0"
      r="58.5"
      stroke="#BBE4D1"
      stroke-
      fill="none"
    ></circle>
    <path
      d="M 1.3612572924182083 -64.98574442586495 A 65 65 0 0 0 3.980102097228898e-15 -65"
      stroke="#28B681"
      stroke-
      fill="none"
      stroke-linecap="round"
      style="filter: url('#dropshadow')"
    ></path>
    <circle
      cx="0"
      cy="0"
      r="55"
      fill="white"
      style="filter: url('#dropshadow')"
    ></circle>
  </g>
</svg>

Plunker：link

【问题讨论】：

@RobertLongson 它应该看起来像第二张图片，在第三张图片中的深绿色周围有一个阴影。第一张被剪成破折号的图片是错误的。

【参考方案1】：

默认的filterUnits是objectBoundingBox

由于您没有指定 filterUnits 这就是您将得到的

objectBoundingBox 单位从 0 到 1，如果您的过滤器超出形状，您可能会使用稍大的值，但数百个数字显然是错误的。

我已经通过明确指定更合适的 userSpaceOnUse 单位来更正您的测试用例，这些值似乎可以保证。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
  <g transform="translate(125,125)">
    <filter id="dropshadow" x="-125" y="-125"   filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset dx="2" dy="2" result="offsetblur"></feOffset>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"></feFuncA>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <circle
      cx="0"
      cy="0"
      r="58.5"
      stroke="#BBE4D1"
      stroke-
      fill="none"
    ></circle>
    <path
      d="M 1.3612572924182083 -64.98574442586495 A 65 65 0 0 0 3.980102097228898e-15 -65"
      stroke="#28B681"
      stroke-
      fill="none"
      stroke-linecap="round"
      style="filter: url('#dropshadow')"
    ></path>
    <circle
      cx="0"
      cy="0"
      r="55"
      fill="white"
      style="filter: url('#dropshadow')"
    ></circle>
  </g>
</svg>