高度值 不防止截止

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值的使用的相同注释适用。