SVG ClipPath：为什么将剪辑路径应用于 DIV 会对 IMAGE 产生不同的结果？

Question

我需要创建一组 3 个三角形，每个三角形都有内容（图像、副本等）。

我已经设置了这支笔来大致显示我想要实现的目标：https://codepen.io/andystent/pen/OJyNdmB

这是一张供快速参考的图片：

在此示例中，“顶部”和“左侧”三角形是应用了剪辑路径并完美显示的图像。

“右”三角形（红色背景）是应用了剪辑路径的 DIV，但比例错误。

它应该看起来像“左”三角形的镜像版本。

当我将它应用到图像时它是完美的，但当我应用到 div 时它不是。最好的方法是什么？

我是 SVG 新手，所以我很可能没有正确执行此操作。我看过很多帖子，我尝试过的方法来自其中一些但没有成功......所以现在我正在联系你们这些天才......

这是红色“右”三角形的 HTML 和 CSS，其中剪辑应用于 CSS 中的 DIV：

#right-wrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  padding: 40px 20px;
  box-sizing: border-box;
}

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="right-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>
<!--      <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
  </svg>
</div>

---

-- 更新：-----

按照 cmets 中的建议，我创建了一个简化的 Pen，它触及了我想要实现的核心，嵌入的 HTML 和 CSS 如下。

本质上，我试图让红色的<div> 像<image> 一样被剪裁。

https://codepen.io/andystent/pen/RwWRjLd

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
}

 <svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
   
 <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
  </svg>
  
   <div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>

Answer 1

这是我将使用蒙版而不是剪辑路径的想法。正确设置 viewBox 的主要技巧（您的代码中已经包含它）添加 preserveAspectRatio="none" 然后掩码大小为 100% 100%

.box {
  width:200px;
  height:200px;
  display:inline-block;
  background:red;
}
.mask {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}

<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">