带有内联 SVG 的 CSS 剪辑路径不起作用

Question

我不确定为什么这不起作用。它应该将绿色矩形夹在对 Angular 线上。如果可能，我宁愿不更改我的 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>