内联SVG路径不工作
内联SVG路径不工作
提问于 2016-12-14 03:46:56
我一直在尝试让一个内联的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>
Stack Overflow用户
发布于 2016-12-14 14:44:33
您已将剪切路径定义为clipPathUnits="objectBoundingBox"。执行此操作时，坐标需要介于0和1之间。(0,0)表示要应用剪辑的元素的左上角。和(1,1)表示右下角。
然而，你的坐标要比这个大得多。例如，初始行(M0,0V678.48)是从(0,0)到(0,678.48)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41129348
复制相关文章
相似问题
腾讯云开发者
