我正在尝试使用<path>
SVG元素创建响应式SVG剪辑路径。但是,我无法使其正常工作。
我已经使它可以使用更基本的形状(例如)工作<circle>
,但不能使用<path>
元素。我还使它可以与<path>
元素一起使用静态尺寸。
我将此处的说明用作参考:https : //www.smashingmagazine.com/2015/05/creating-sensitive-shapes-with-clip-path/。我还在StackOverflow和其他示例中查看了类似的问题,但它们主要处理基本形状,而不处理路径变量。
我正在使用的SVG形状是从Adobe Illustrator导出的雨滴形状。
这是我的代码:
的HTML
<svg id="raindropSVG" viewBox="0 0 810 1012">
<defs>
<clipPath id="raindropClipPath" clipPathUnits="objectBoundingBox">
<path d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
</clipPath>
</defs>
</svg>
<img src="clipped-image.jpg" alt="" class="clipped-img">
的CSS
.clipped-img {
clip-path: url(#raindropClipPath);
width: 100%;
height: auto;
}
#raindropSVG {
width: 0;
height: 0;
}
这个想法是,改变雨伞的宽度(或高度).clipped-img
应该相应地缩放雨滴的形状。
使用clipPathUnits="objectBoundingBox"
对于使clipPath
响应性是必要的。但是,一旦添加此内容,剪切的图像就会消失。
我认为我要去哪里了
我怀疑path元素指定的路径不是相对单位,但是我不知道如何将单位更改为相对单位。
预先感谢您的所有回复!
此答案使剪切路径的形状失真,以使其始终跨越整个图像,而不考虑其纵横比。
使用clipPathUnits="objectBoundingBox"
,只有0到1之间的坐标将位于图像的边界矩形内。您必须缩小路径。
幸运的是,viewBox
您的路径的名称为其尺寸。不幸的是,您不能将缩放比例的计算留给渲染器,而必须直接进行转换:scale(1 / 810, 1 / 1012)
。请参阅的内容元素限制<clipPath>
。
SVG 1.1和SVG 2规范名称transform
都是其<clipPath>
本身的可能属性,但都未定义应应用的坐标系。出于浏览器兼容性的考虑,最好不使用它并在该<path>
元素,即使我可以看到在Firefox中结果也没有差异。
.clipped-img {
clip-path: url(#raindropClipPath);
width: 100%;
height: auto;
}
#raindropSVG {
width: 0;
height: 0;
}
<svg id="raindropSVG">
<defs>
<clipPath id="raindropClipPath" clipPathUnits="objectBoundingBox">
<path transform="scale(0.0012345, 0.00098814)" d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
</clipPath>
</defs>
</svg>
<img src="https://i.stack.imgur.com/zubYX.png" alt="" class="clipped-img">
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句