SVG clippath viewbox가 작동하지 않습니다.

Question

div 요소에 SVG clippath를 추가하려고합니다.

clippath가 전체 div 요소를 확장하도록합니다.

SVG에 뷰 박스를 지정하고이 뷰 박스 내에서 clippath 폴리곤 포인트를주었습니다.

그러나 다각형은보기 상자 또는 컨테이너의 높이와 너비를 기반으로 높이와 너비를 조정하지 않는 것 같습니다. 정적 인 채로 남아 있습니다.

어떻게 작동합니까? 여기 내 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="100" height="100" viewBox="0 0 100 100" > 
    <clipPath id="svgClip"> 
     <polygon points="0 0 0 100 100 100"/> 
    </clipPath> 
    <path id="svgMask"> 
     <polygon points="0 0 0 100 100 100"/> 
    </path> 
</svg> 

이 내 HTML 코드입니다 :

<div class="div11"></div> 

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

.div11{ 
    background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.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: 5000; 
    -webkit-clip-path: url(clip.svg); 
    clip-path: url(clip.svg#svgClip); 
    -webkit-mask: url(clip.svg);} 

도와주세요! 여기에 바이올린이 있습니다. http://jsfiddle.net/xhh7a/3/

고마워요!

Answer 1

나는 이것이 당신이 찾고있는 것이라고 생각합니다. 모양에 맞는 크기였습니다. 적어도 Firefox에서 실행했을 때였습니다.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    <clipPath id="svgClip" clipPathUnits="objectBoundingBox"> 
     <polygon points="0 0 0 1 1 1"/> 
    </clipPath> 
    <path id="svgMask" maskContentUnits="objectBoundingBox"> 
     <polygon points="0 0 0 1 1 1"/> 
    </path> 
</svg> 
<div class="div11"></div>