<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屬性值在某個點以上對此沒有影響？

（在Chrome，Firefox和邊緣轉載 - 看起來並不像一個瀏覽器錯誤。）

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值的相同註釋也適用。