SVG 클립 경로는 Chrome이나 사파리가 아닌 파이어 폭스에서만 작동합니다.

Question

나는 기본적으로 브라우저 화면의 사각형 (높이와 너비를 만들기 위해 함께 온 두 개의 삼각형이있다.

내가이 개 된 div에 적용이 SVGs을 만들어 이렇게하려면.

을하지만,이 단지 작품을 . 내가 시도하고 사파리와 크롬에서 볼 몇 가지 이유로 파이어 폭스에서 div의이 숨겨져 있습니다

이 도와주세요 왜 이런 일이

SVG 1 :.!?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
<defs> 
    <filter id="blur" x="0%" y="0%" width="100%" height="100%"> 
     <feGaussianBlur stdDeviation="30" /> 
     <feColorMatrix type="saturate" values="2" /> 
    </filter> 
    <filter id="unblur"> 
     <feGaussianBlur stdDeviation="0" /> 
     <feColorMatrix type="saturate" values="3" /> 
    </filter> 
</defs> 
<clipPath id="svgClip" clipPathUnits="objectBoundingBox"> 
    <path id="svgPath" d="M0,0 L1,0 0,1z"/> 
</clipPath> 
<path id="svgMask" d="M0,0 L1,0 0,1z" /> 
</svg> 

SVG 2 :

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
<defs> 
    <filter id="blur2" x="0%" y="0%" width="100%" height="100%"> 
     <feGaussianBlur stdDeviation="30" /> 
     <feColorMatrix type="saturate" values="2" /> 
    </filter> 
    <filter id="unblur2"> 
     <feGaussianBlur stdDeviation="0" /> 
     <feColorMatrix type="saturate" values="3" /> 
    </filter> 
    <clipPath id="svgClip2" clipPathUnits="objectBoundingBox"> 
    <polygon points="0 1 1 0 1 1"/> 
</clipPath> 
</defs> 
</svg> 

CSS :

#top, #bottom{ 
    background: url(img/1.JPG) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index: 2;} 
#top{ 
    -webkit-clip-path: url(clip.svg#svgClip); 
    -moz-clip-path: url(clip.svg#svgClip); 
    -o-clip-path: url(clip.svg#svgClip); 
    clip-path: url(clip.svg#svgClip); 
    filter: url(clip.svg#blur);} 
#bottom{ 
    -webkit-clip-path: url(clip2.svg#svgClip2); 
    -moz-clip-path: url(clip2.svg#svgClip2); 
    -o-clip-path: url(clip2.svg#svgClip2); 
    clip-path: url(clip2.svg#svgClip2); 
    filter: url(clip2.svg#blur2);} 

HTML : 사전에 도움을

<div class="top"></div> 
<div class="bottom"></div> 

감사합니다!

Answer 1

Firefox에서 SVG 클립 경로는 HTML 및 SVG 요소 모두에 적용 할 수 있습니다. 이는 SVG 및 HTML 사양의 확장입니다.

Chrome/Safari 및 다른 UA는 현재 SVG 요소에 클립 경로 만 적용 할 수 있습니다. 나는 다른 UA가 어떤 시점에서 SVG가 아닌 컨텐트를 클리핑하는 것을 지원할 것이라고 기대하지만 나는 언제 알지 못한다.

Firefox가 아닌 브라우저에서 수행 할 수있는 작업은 래퍼에 <div>을 삽입하고 <foreignObject> 요소를 잘라내십시오.