内联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>
		<clipPath id="nav-path" clipPathUnits="objectBoundingBox">
		  <polygon points="0 0, 73 0, 100 100, 0 100"></polygon>
	  </clipPath>
  </defs>
</svg>
  
<div class="el-to-clip"></div>

Answer 1

objectBoundingBox单位在0..1范围内。也许你的意思是.73和1如下所示。

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

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