创建响应性SVG剪辑路径/制作SVG<；路径>；反应敏捷的

我正在尝试使用

SVG元素创建一个响应的SVG片段路径。然而，我有困难让它工作

我使用了更基本的形状，比如

，但没有使用

元素。我还使用

元素的静态维度使其工作

我将此处的说明用作参考：。我还研究了StackOverflow和其他示例中的类似问题，但它们主要涉及基本形状，而不是路径变量

我使用的SVG形状是从AdobeIllustrator导出的雨滴形状

这是我的密码：

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

这个想法是改变

剪裁的img

的宽度（或高度）应该相应地缩放雨滴的形状

使用

clipPathUnits=“objectBoundingBox”

是使

clipPath

具有响应性所必需的。然而，我一加上这个，剪辑的图像就消失了

我认为我错在哪里

我怀疑path元素指定的路径不是相对单位，但是我不知道如何将单位更改为相对单位

---

---

提前感谢所有回复

如果仅指定了

viewBox

，SVG将始终响应

Svg保存图像比例 除非指定了值'preserveAspectRatio=“none”

因此，

路径

格式化的

剪辑路径

也将响应

使用

标记添加到SVG的图片也将是自适应的，并保持其比例

雨滴{ 宽度：75%； 身高：75%； } .剪式img{ 剪辑路径：url（#raindropClipPath）； }

---

此答案会扭曲剪辑路径的形状，使其始终覆盖整个图像，而不管其纵横比如何

使用

clipPathUnits=“objectBoundingBox”

，只有0和1之间的坐标位于图像的边框内。为此，您必须缩小路径

幸运的是，路径的

viewBox

命名了它的维度。不幸的是，不能将缩放计算留给渲染器，而是必须直接进行转换：

scale（1/810，1/1012）

。有关

的内容元素，请参见

SVG1.1和SVG2规范名称

都将
转换为
本身的一个可能属性，但都没有定义它应该应用的坐标系。为了保证浏览器的兼容性，最好不要去管它，而是在
元素上使用转换，即使我可以看到在Firefox中结果没有什么不同


.clipped img{
剪辑路径：url（#raindropClipPath）；
宽度：100%；
高度：自动；
}
#雨滴{
宽度：0；
身高：0；
}

objectBoundingBox单位范围从0到1。M0604.4太大了。想象一下，你把单位从3英寸改为3公里，你不会期望这是相同的距离。@RobertLongson谢谢你的回答。如何将这些单位更改为相对单位？在处理基本形状时，这是非常简单的，但如何使用更复杂的形状（如示例中所示）来实现这一点？当图像的纵横比发生变化时，有两种方法可以实现这一点：要么剪辑路径的纵横比适应图像的纵横比（扭曲形状），要么剪辑路径保留其纵横比，但不会延伸到图像的所有边界。你想让这条路走哪条路？@ccprog我会选择第一条路，因为这是我所期望的。不管哪种方式都可以。谢谢你的回答。当图像是SVG的一部分时（如示例中所示），它是响应的。这是朝着正确方向迈出的一步。但是，出于我的目的，当图像位于SVG之外并且路径通过剪辑路径引用时，我需要它工作。这是因为我剪辑的可能不是图像，它可能是视频或其他内容。这就是为什么我需要剪辑路径本身具有响应性。@Ron你有一个非常有趣的想法。我会考虑的。但是，如果svg中的clipPath在所有现代浏览器中都能工作，那么浏览器就支持clip path css。这种方法的另一个缺点是，您不能设置
height:auto
，但必须明确地调整图像的大小。您自己已经在上面写过，会出现比例扭曲，但是如果这适合问题的作者，那么你的决定就是最好的了。我会同意他对我的问题的评论。但是你是对的，我应该在后面的回答中详细说明。谢谢你的回答。我选择这个作为被接受的答案，因为它更完整地回答了我的问题@亚历山大，你的回答也很有启发性。
.clipped-img {
    clip-path: url(#raindropClipPath);
    width: 100%;
    height: auto;
}

#raindropSVG {
    width: 0;
    height: 0;
}