Chrome 上不支持内联 css 剪辑路径答案

【问题标题】：Inline css clip-path not respected on ChromeChrome 上不支持内联 css 剪辑路径
【发布时间】：2020-09-06 19:25:46
【问题描述】：

我正在制作一些动画和图形库来处理 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 位窗口）：

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;
}

&lt;div id="test"&gt;&lt;/div&gt;

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

【问题讨论】：

分享代码。
@TemaniAfif 添加了测试示例。在 chrome 上看到它，至少它在我的上不起作用
去掉边框，不需要
你是说这是问题所在？因为根据规范，这应该可以工作，并且我的情况需要边框框
您对使用边框框有什么期望？你没有边框，没有填充，没有边距，所以不需要

标签： css google-chrome clip-path

【解决方案1】：

通过@TemaniAfif 在答案中总结 cmets，使其保持不变：

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

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）来说似乎并非如此。

因此，在提供对该功能的完全支持之前，这只是一种解决方法。

【讨论】：