将SVG剪切路径应用于<div>元素的正确方法是什么？

Question

我对图像应用了SVG剪切路径，可以完美呈现。

当我将其应用于<div>元素时，形状是正确的，但是比例是错误的。

以下是Pen的示例：https://codepen.io/andystent/pen/RwWRjLd

基本上，红色三角形（正确形状但比例错误）应看起来与图像三角形（正确形状和比例正确）相同。

任何帮助将不胜感激，因为我无法弄清楚。谢谢！

 <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>

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