インラインSVGが動作しないCSSクリップパス

Question

これがなぜ機能しないのか分かりません。緑色の四角形を対角線でクリップする必要があります。可能であれば、私は自分のhtml構造を変更したくないです（SVGを変更するのは問題ありません）。

.el-to-clip{ 
 
    clip-path: url(#nav-path); 
 
    width: 500px; 
 
    height: 1000px; 
 
    background-color: green; 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
\t \t <clipPath id="nav-path" clipPathUnits="objectBoundingBox"> 
 
\t \t <polygon points="0 0, 73 0, 100 100, 0 100"></polygon> 
 
\t </clipPath> 
 
    </defs> 
 
</svg> 
 
    
 
<div class="el-to-clip"></div>

Answer 1

ObjectBoundingBoxで単位おそらくあなたは、以下のように0.73と1を意味範囲0..1です。

.el-to-clip{ 
 
    clip-path: url(#nav-path); 
 
    width: 500px; 
 
    height: 1000px; 
 
    background-color: green; 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
\t \t <clipPath id="nav-path" clipPathUnits="objectBoundingBox"> 
 
\t \t <polygon points="0 0, .73 0, 1 1, 0 1"></polygon> 
 
\t </clipPath> 
 
    </defs> 
 
</svg> 
 
    
 
<div class="el-to-clip"></div>