在Chrome浏览器上不尊重内联css剪切路径。

Question

我正在制作一些动画和图形库，以便与html一起工作。有些东西需要剪接，而且由于元素是动态生成的。clip-path (大部分 polygon) 被动态地添加到元素的样式属性中。

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

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

这应该是64版之前的Chrome浏览器的一个bug，但无论我在哪里看，它都说最新的chrome（以及一般的webkit浏览器）已经完全支持了 clip-path 和 polygon 特别是。

注意事项 测试时，使用url为 svg 路径使用剪辑蒙版，但我想避免使用剪切蒙版。svg我想保持它的纯净 html/css (然而，如果我没有记错的话，甚至没有。svg 内联网址与chrome的工作时，我拉我的头发，试图找出为什么它不工作的预期).

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

测试示例应该显示一个三角形（在Chrome上不工作，至少在我最新的Chrome 83.0.4103.61 64位窗口上是这样）。

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 在答案中，所以它保持。

如果 border-box 剔除 clip-path例如

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

那么它也可以在Chrome浏览器中工作。然而，根据 MDN的最新规格，以下是有效的组合，应该是支持的（该页面对Chrome的支持是绿草如茵）。

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

该 clip-path 假设了一个盒子模型，而且在某些情况下，用户必须明确地设置假设的盒子模型，以便进行剪切，所以这就是为什么支持组合值。但似乎在Chrome浏览器（和我测试过的Opera）中不是这样。

因此，在完全支持该功能之前，这只是一个变通的办法。