SVG가 별도의 파일이지만 인라인이 아닌 경우 클립 경로/웹 키트 마스크가 작동합니다.

Question

다음 구현을 사용하여 SVG 및 일부 CSS를 사용하여 요소를 마스크합니다.

//styles.css 
.elementToBeMasked { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 1; 
    display: block; 
    overflow: hidden; 
    clip-path:url(rhombus.svg#rhombusclip); 
    -webkit-mask:url(rhombus.svg#rhombus); 
    -webkit-mask-repeat:no-repeat; 
} ... 

//rhombus.svg 
<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> 
    <clipPath id="rhombusclip"> 
    <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
    </clipPath> 
    <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
</svg> 

Chrome, Safari 및 Firefox에서 잘 작동합니다. 그러나 일부 속성에 애니메이션을 적용하고 SVG를 HTML로 가져 오려고했습니다.

이 내 인라인 SVG 코드 :

//index.html 
<div class="elementToBeMasked">...</div> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> 
    <clipPath id="rhombusclip"> 
     <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
    </clipPath> 
    <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
</svg> 

그리고 이것은 내 업데이트 CSS입니다 :

//styles.css 
.elementToBeMasked { 
    ... 
    clip-path:url(index.html#rhombusclip); 
    -webkit-mask:url(index.html#rhombus); 
} 

이 구현은 모든 브라우저에서 작동하지 않습니다. 어떤 제안이라도 대단히 감사하겠습니다.

Answer 1

당신이 styles.css#rhombusclip 위해 실제로 속기의와 styles.css 파일에없는 #rhombusclip 거기로 조회가 실패 styles.css에서 #rhombusclip을 작성하는 경우.

대신 index.html#rhombusclip을 작성하고 다른 참조에도 동일하게 적용해야합니다.

이것은 w3c CSS 표준이 말하는 것과 내가 알고있는 웹킷을 제외한 모든 UA는 이와 같이 작동합니다. 이상한 웹킷이 있기 때문에 어느 시점에서 Webkit이 바뀔 것이라고 생각합니다.

Answer 2

빠른 업데이트, 다음은 인라인에서만 작동하지만 Firefox에서만 작동합니다.

 <style> 
     .box { 
      position: fixed; 
      width: 450px; 
      height: 320px; 
      top: 10%; 
      left: 10%; 
      clip-path:url(#rhombusclip); 
      -webkit-mask:url(#rhombus); 
      -webkit-mask-repeat:no-repeat; 
     } 
     </style> 
     <div class="box"></div> 
     <svg width="1000" height="1000"> 
      <defs> 
       <clipPath id="rhombusclip"> 
        <path d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
       </clipPath> 
       <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" /> 
      </defs> 
     </svg>