在 Chrome 上不遵守内联 css 剪辑路径

Question

我正在制作一些动画和图形库来使用 html。对于某些需要裁剪的东西，并且由于元素是动态生成的，因此 clip-path (mostly polygon) 在元素的样式中动态添加属性 :

el.style.clipPath = 'polygon(..)';

Firefox (76) 工作正常，但是 Chrome (83)（以及 Opera）不遵守 clip-path 属性（在 chrome 元素检查它甚至没有显示在元素的样式属性中）

它应该是 v.64 之前 Chrome 中的一个错误，但无论我在哪里看，它都说最新的 chrome（和一般的 webkit 浏览器）完全支持 clip-path 和 polygon 特别是。

注意： 用 svg 路径的 url 来测试剪辑蒙版不是问题，但我想避免svg，我想保持它的纯正 html/css（但是如果我没记错的话甚至 svg 内联 url 也不能与 chrome 一起工作我抓着头发想弄清楚为什么它没有按预期工作)。

我也尝试添加浏览器前缀（即 el.style.WebkitClipPath = 'polygon(..)'），但没有任何改变。

测试示例应该显示一个三角形（不适用于 Chrome，至少我最新的 Chrome 83.0.4103.61 64 位 windows）：

var test = document.getElementById('test');
test.style.clipPath = 'border-box polygon(0px 0px, 200px 100px, 0px 200px)';

#test{
  position:relative;
  width: 200px;
  height:200px;
  background: #ff0000;
  padding: 0;
  margin: 0;
  border: 2px solid #00ff00;
  box-sizing: border-box;
  overflow: hidden;
}

<div id="test"></div>

我错过了什么？ chrome 是否支持 clip-path 和 polygon？

Answer 1

总结 @TemaniAfif 的评论，使其保持不变：

如果从clip-path中删除border-box，例如：

test.style.clipPath = 'polygon(..)';

那么它也适用于 Chrome。然而，根据 latest spec on MDN，以下是有效组合，应该得到支持（该页面上对 Chrome 的支持是绿色的）：

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

无论如何，clip-path 都采用盒模型，在某些情况下，用户必须明确设置假定的盒模型以进行裁剪，这就是支持组合值的原因。但对于 Chrome（据我测试过的 Opera）似乎并非如此。

所以这只是一种解决方法，直到提供对该功能的完全支持。

在 Chrome 上不遵守内联 css 剪辑路径

Inline css clip-path not respected on Chrome

css

google-chrome

clip-path