使用 clipPathUnits="objectBoundingBox" 使剪辑路径消失

Question

问题：

我创建了一个需要响应的 SVG 剪辑路径，但是当我尝试在剪辑路径标签中使用 clipPathUnits="objectBoundingBox" 时，它会使目标对象消失。

我制作了带有和不带的示例 sn-ps。 第一个按预期显示，但第二个完全隐藏。

我已经使用各种简单的形状和路径对其进行了测试，这些都可以正常工作，但我无法让 clipPathUnits="objectBoundingBox" 使用更复杂的东西，不确定我缺少什么。

片段：

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}

<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" >
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

资源：

https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits

https://www.sarasoueidan.com/blog/css-svg-clipping/

Answer 1

使用clipPathUnits="objectBoundingBox"时，剪切路径的对象边界框的宽度和高度被认为是长度为1个单位的值。

为了实现这一点，您要么需要重写路径的 d 属性，要么可以缩放路径。在这种情况下，我使用transform="scale(0.00118,0.0017)"

 <clipPath id="wav" clipPathUnits="objectBoundingBox">
            <path transform="scale(0.00118,0.0017)" id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.....

为了知道使用什么值

1. 我得到了路径的边界框：

   让 bb=thePath.getBBox();

2. 我使用 bb.width 和 bb.height 来获取比例：

   让 sx = 1/bb.width; 让 sy = 1/bb.height

3. 我缩放路径：

   thePath.setAttribute("变换", scale(${sx},${sy}))

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}

<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.00118,0.0017)"  id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

这是来自 Sara Soueidan 的文章：

使用objectBoundingBox值时，<clipPath>的内容指定的坐标必须在[0, 1]范围内

这是来自 MDN：

objectBoundingBox 该值表示元素内的所有坐标都相对于应用剪切路径的元素的边界框。即坐标系的原点是物体边界框的左上角，物体边界框的宽度和高度被认为是长度为1个单位的值。