<filter>の丈夫な高さはカットオフを防ぎません

Question

私は<path>に<filter>を適用しようとしていますが、ぼかしだけでなく元の画像の一部、つまりマーカーもクリップされている問題があります。

私はデフォルトのフィルタの高さ（これは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属性値はここで効果がありませんか？

（クロム、Firefoxとエッジで再現 - 。ブラウザのバグのようには見えません）

Answer 1

あなたにもフィルタ効果領域の上側の境界線を移動する必要があります。デフォルトはy=-10%です。あなたがfilterUnits="userSpaceOnUse"を設定した場合、絶対値を使用して、脇として

<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>

は、のみ動作します。 y値の使用に関する同じ注釈が適用されます。