< filter>的巨大高度值不阻止截止 [英] Humongous height value for <filter> not preventing cutoff
问题描述
我正在尝试在<path>
上应用<filter>
,但是我遇到了裁剪对象的问题,不仅是模糊,而且还有原始图像的某些部分(即标记).
I am trying to apply a <filter>
on a <path>
but I am having problems with things being clipped, not just the blur but also parts of original image, namely the markers.
所以我尝试增加默认滤镜高度(为120%
),但似乎无济于事.
So I tried increasing the default filter height (which is 120%
) but it did not seem to help.
<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>
的跨度足以包围它的所有子项,这意味着对于顶部箭头而言,高度并不是很高,因此我尝试为
Now the <g>
spans as much as is necessary to surround all its children, which means that for the top arrow the height isn't very much to begin with so I tried using absolute instead of relative values for the height
but that does not help either:
<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
属性值在这里不起作用?
Any idea what might cause this clipping and what can be done about it? Why do height
attribute values above a certain point have not effect here?
(在Chrome,Firefox和Edge中复制-看起来不像是浏览器错误.)
(Reproduced in Chrome, Firefox and Edge – does not look like a browser bug.)
推荐答案
您还必须移动滤镜效果区域的上边框.默认值为y=-10%
.
You have to move the upper border of the filter effect region as well. Default is 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值的相同说明也适用.
As an aside, using absolute values only works if you set filterUnits="userSpaceOnUse"
. The same note on the use of y values applies.
这篇关于< filter>的巨大高度值不阻止截止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!