<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> 상단에 대해 높이 화살표 즉, 모든 어린이를 둘러싸 필요한만큼 그렇게 I 절대하여 시도 우선 매우 아니다 걸쳐 대신 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 속성 값이 여기에 영향을주지 않는 이유는 무엇입니까?

(크롬, 파이어 폭스와 에지 재현은 - 브라우저 벌레처럼 보이지 않는다.) 당신은뿐만 아니라 필터 효과 영역의 상위 경계를 이동해야

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 값 사용에 대한 동일한 참고 사항이 적용됩니다.