SVG ClipPath。为什么应用剪贴路径到DIV上的结果与IMAGE不同？

Question

我需要创建一组3个三角形，每个三角形中都有内容（图片、复制等）。

我已经设置了这个Pen来显示我想实现的大致内容。https:/codepen.ioandystentpenOJyNdmB。

这里有一张图片供快速参考。

在这个例子中，"顶部 "和 "左侧 "三角形是IMAGES，应用了剪贴路径，显示得很完美。

右边 "三角形（红色背景）是一个应用了剪切路径的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>

---

--------------------------------------------------------------------------更新：

正如评论中所建议的那样，我创建了一个简化的Pen，它能达到我想要达到的目的，下面是嵌入的HTML和CSS。

本质上，我试图让红色的 <div> 要剪得像 <image>.

https:/codepen.ioandystentpenRwWRjLd。

#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

下面是一个想法，我将使用mask代替clip-path。主要的技巧是正确设置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">