SVG 필터가 부분적으로 잘 리게됩니다.

가장 좋은 방법은 무엇인지 모르지만 이미지를 업로드하면 codepen에서 직접 볼 수 있습니다. SVG 필터가 부분적으로 잘 리게됩니다.

CSS의 :

.container{ 
    position: relative; 
    margin-top: 50%; 
    -webkit-filter: url("#goo"); 
    filter: url("#goo"); 
}

SVG 필터 : 기본적으로

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <filter id="goo"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" /> 
     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -9" result="goo" /> 
     <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
    </filter> 
    </defs> 
</svg>

, 좀 원에 "끈적 끈적한"효과를 만들 SVG 필터를 사용하는 것을 시도하고있다. 때로는 예외를 제외하고는 의도 한대로 작동합니다. 일부 지역에서는 효과가 "컷오프"됩니다.

이 문제가 발생하는 장소는 임의적으로 바뀝니다. 크롬, 파이어 폭스 및 엣지에서 이것을 재현하려고 시도했지만 그 결과가 매우 일치하지 않습니다.

SVG 필터가 버그가있는 경우입니까? 또는 나는 그들을 잘못 사용하고 있는가?

감사합니다.

출처

2017-10-19 Manu

일반적으로 이러한 상황이 발생하면 이는 필터 영역이 충분히 크지 않기 때문입니다. 그러나 나는이 경우에는 괜찮다고 생각한다. Firefox에서는 괜찮아 보입니다. 그러나 Chrome에는 몇 가지 문제가 있습니다. 하지만 Chrome 버그 일뿐입니다. –

SVG 필터를 HTML 요소에 적용하는 대신 SVG 전용 애니메이션으로 만들면 더 많은 행운을 누릴 수 있습니다. –

SVG 필터는 전체 캔버스를 스팬하지 않고, 작업하는 객체 경계 상자 너머로 조금 밖에 흐르지 않는 filter effects region을 가지고 있습니다. 표시되지 않는 기본값은 각 방향으로 10 %입니다.

<filter filterUnits="objectBoundingBox" 
     x="-10%" y="-10%" width="120%" height="120%">

이 값이 충분하지 않은 경우 더 큰 값을 선택하십시오. 백분율 대신 픽셀 값을 사용하지 않으려면 filterUnits="userSpaceOnUse"을 설정하고 필터링 된 객체의 좌표계를 사용하여 효과 영역을 배치합니다.

출처

2017-10-19 19:48:06 ccprog

이것은 그 것이었다, 고마워! – Manu

SVG 필터가 부분적으로 잘 리게됩니다.

답변

관련 문제