svg - <filter> 的巨大高度值不会阻止截断

Question

我正在尝试申请 <filter>在<path>上但我遇到了被剪裁的问题，不仅是模糊，还有原始图像的部分，即标记。

因此我尝试增加默认过滤器高度(即 120% )，但似乎没有帮助。

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="999%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

现在是<g>跨越包围其所有子项所需的尽可能多的距离，这意味着对于顶部箭头来说，开始时的高度并不是很大，因此我尝试使用 height 的绝对值而不是相对值。但这也无济于事:

<svg style="height:300px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" height="1234">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-150)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

知道什么可能会导致这种剪裁以及可以采取什么措施吗？为什么height高于某个点的属性值在这里不起作用？

(在 Chrome、Firefox 和 Edge 中复制 - 看起来不像浏览器错误。)

Answer 1

您还必须移动滤镜效果区域的上边框。默认值为y=-10%。

<svg style="height:400px;width:100%;background-color:LightCyan">

<defs>
  <filter id="colorFilter" y="-200%" height="500%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 3 0" result="lightenedBlur"></feColorMatrix>
    <feMerge>
      <feMergeNode in="lightenedBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
  <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="8" markerHeight="8" orient="auto" style="fill: grey;">
    <path d="M0,-5L10,0L0,5"></path>
  </marker>
</defs>

<g transform="scale(2)">

  <g transform="translate(-500,-230)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-200)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.4632873535149,274L657.4632873535149,271.03831481933645L759.92657470703,271.03831481933645"></path>
  </g>

  <g transform="translate(-500,-120)" filter="url(#colorFilter)">
    <path stroke="grey" fill="none" marker-end="url(#arrow)" d="M555,274L657.6947631835931,274L657.6947631835931,222.58172607421926L760.3895263671862,222.58172607421926"></path>
  </g>

</g>

</svg>

顺便说一句，只有设置 filterUnits="userSpaceOnUse" 时才可以使用绝对值。关于 y 值的使用的相同注释也适用。