时间戳

首页 > 解决方案 > 为什么这个 SVG 投影过滤器在路径很短时会剪切路径？

svg - 为什么这个 SVG 投影过滤器在路径很短时会剪切路径？

问题描述

所以我需要一些帮助来理解这个 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>

Plunker在这里：链接

标签： svgsvg-filters

解决方案

  • 默认的 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>

推荐阅读