Question

我一直试图让内联svg裁剪路径起作用，但不能弄明白为什么不是。

代码段中的第一个div是无效的（#myClip）

第二个是它应该是什么样子。

第三个div是完全相同的代码但具有不同的路径。

那我的第一个怎么了？非常感谢任何帮助。

#myDiv {
    background: Red;
    min-height: 400px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}

/* Div with a different clipping path that I don't want */
#myDiv-two {
    background: Red;
    min-height: 400px;
    -webkit-clip-path: url(#myClipTwo);
	clip-path: url(#myClipTwo);
}

<h2>Div with clip path that's not working</h2>
<div id="myDiv">
    <svg width="0" height="0">
      
          <clipPath id="myClip" clipPathUnits="objectBoundingBox">
            <path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z"/>
          </clipPath>
        
    </svg>
</div> 



<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>


<h2>Div with different clipping path</h2>

<div id="myDiv-two">
    <svg width="0" height="0">
      
          <clipPath id="myClipTwo" clipPathUnits="objectBoundingBox">
            <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
          </clipPath>
        
    </svg>
</div>

Answer 1

您已将剪切路径定义为clipPathUnits="objectBoundingBox"。当您这样做时，坐标需要介于0和1之间。（0,0）表示剪辑应用于的元素的左上角。而（1,1）代表右下角。

然而，你的坐标远大于此。例如，您的初始行（M0,0V678.48）是从（0,0）到（0,678.48）。

Answer 2

我想要解释为什么坐标需要介于0和1之间，但是我手工制作了一个SVG，而不是使用0到1之间的坐标从插图画家那里导出非常接近我原来的坐标，这样就可以了

#myDiv {
    background: Red;
    min-height: 400px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}

<h2>New Clip path</h2>
<div id="myDiv">
    <svg width="0" height="0">
      
          <clipPath id="myClip" clipPathUnits="objectBoundingBox">
            <path d="M0,0 1,0 1,0.86 C 1.1,.85, 0.9,1, 0.7,1 0.4,1, 0.3,0.8,0,1z"/>
          </clipPath>
    </svg>
</div> 


<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>

内联SVG路径不起作用

2 个答案: