剪辑路径高度/objectBoundingBox 在 Firefox 中不起作用

Answer 1

剪辑路径很烦人。在 CSS 中定义时，它们并不那么灵活。它们不会缩放，因此需要具有精确的尺寸。

我建议您使用 SVG 图像（整个图像，而不是遮罩或剪辑路径）作为 CSS mask-image（可以是像这里这样的数据 URI 或对 SVG 文件的引用）。 CSS 掩码具有不同的 CSS 属性，例如掩码大小、掩码位置、掩码重复等，可用于设置 HTML 元素的正确掩码。

body {
  display: flex;
}

.masked {
  width: 200px;
  height: 200px;
  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8cGF0aCBkPSJNIDEgMCBoIDAgYyAtMC4wMiAwLjAwNiAtMC4wMyAwLjA3OSAtMC4wNCAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBjIC0wLjAxIC0wLjA3NCAtMC4wMjEgLTAuMTUgLTAuMDQyIC0wLjE1IHMgLTAuMDMyIDAuMDc2IC0wLjA0MiAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBDIDAuMDMyIDAuMDc2IDAuMDIxIDAgMCAwIHYgMSBoIDEgViAwIi8+Cjwvc3ZnPgo=');
}

.t1 {
  background-color: orange;
  mask-size: 100%;
  mask-repeat: no-repeat;
}

.t2 {
  background-color: tomato;
  mask-size: 20%;
  mask-repeat: repeat-x;
  mask-position: bottom;
}

.t3 {
  background-color: lime;
  mask-size: 50%;
  mask-repeat: repeat-x;
  mask-position: center;
}

<div class="masked t1"></div>
<div class="masked t2"></div>
<div class="masked t3"></div>

SVG 文档

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
<path d="M 1 0 h 0 c -0.02 0.006 -0.03 0.079 -0.04 0.15
  c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15
  c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15
  c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15
  c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15
  c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c
  -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147
  C 0.032 0.076 0.021 0 0 0 v 1 h 1 V 0"/>
</svg>