为什么这个 SVG 投影滤镜在路径很短时会剪裁路径？

Question

所以我需要一些帮助来了解这个 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" width="250" height="250">
      <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-width="7px"
      fill="none"
    ></circle>
    <path
      d="M 1.3612572924182083 -64.98574442586495 A 65 65 0 0 0 3.980102097228898e-15 -65"
      stroke="#28B681"
      stroke-width="20px"
      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>

笨蛋在这里：link

Answer 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" width="250" height="250" 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-width="7px"
      fill="none"
    ></circle>
    <path
      d="M 1.3612572924182083 -64.98574442586495 A 65 65 0 0 0 3.980102097228898e-15 -65"
      stroke="#28B681"
      stroke-width="20px"
      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>

为什么这个 SVG 投影滤镜在路径很短时会剪裁路径？

Why is this SVG drop shadow filter clipping the path when it's short?

svg

svg-filters