我正在尝试使用创建响应式 SVG 剪辑路径<path>
SVG 元素。但是,我无法使其正常工作。
我已经使用更基本的形状来让它工作,例如<circle>
,但不是<path>
元素。我还让它使用静态尺寸与<path>
元素。
我使用此处的说明作为参考:https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/ https://www.smashingmagazine.com/2015/05/creating-responsive-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
应相应地缩放雨滴形状。
Using clipPathUnits="objectBoundingBox"
是必要的clipPath
反应灵敏。然而,一旦我添加这个,剪切的图像就会消失。
我认为我哪里做错了
我怀疑路径元素指定的路径不是相对单位,但我不知道如何将单位更改为相对单位。
预先感谢所有回复!