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

问题描述

我正在制作一些动画和图形库来使用 html。对于某些事情，需要裁剪，并且由于元素是动态生成的，因此clip-path（大部分polygon）动态添加到元素的样式属性中：

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

Firefox（76）工作得很好，但是 Chrome（83）（以及 Opera）不尊重该clip-path属性（在 chrome 元素检查中，它甚至没有显示在元素的样式属性中）

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

注意：使用路径的 url 进行测试以用作剪辑蒙版不是问题svg，但我想避免svg，我想保持它的纯净html/css（但是，如果我没记错的话svg，当我在拉我的头发试图弄清楚为什么它不能按预期工作）。

我也尝试过添加浏览器前缀（即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不支持？

标签： cssgoogle-chromeclip-path

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

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

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

问题描述

解决方案

推荐阅读