创建响应式SVG剪辑路径/使SVG <path>响应

时间:2018-12-04 17:10:34

标签: svg clip-path

我正在尝试使用<path> SVG元素创建响应式SVG剪切路径。但是,我无法使其正常工作。

我已经使它可以使用更基本的形状(例如<circle>,而不是<path>元素)工作。我还使它可以与<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的宽度(或高度)应相应地缩放雨滴形状。

使用clipPathUnits="objectBoundingBox"对于使clipPath具有响应性是必要的。但是,一旦添加此内容,剪切的图像就会消失。

我认为我要去哪里了

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


提前感谢所有回复!

2 个答案:

答案 0 :(得分:3)

此答案扭曲了剪切路径的形状,以使其始终覆盖整个图像,而不考虑其纵横比。

使用clipPathUnits="objectBoundingBox",只有0到1之间的坐标将位于图像的边界矩形内。您必须缩小路径。

幸运的是,您的路径的viewBox为其尺寸标注。不幸的是,您不能将缩放比例的计算留给渲染器,而必须直接进行转换:scale(1 / 810, 1 / 1012)。有关<clipPath>的内容元素,请参见restrictions

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

答案 1 :(得分:2)

如果仅指定npm run dev

SVG将始终响应。

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

因此,viewBox格式path也将响应。

使用标签添加到SVG的图片也将具有自适应性并保持其比例。

clip-path
#raindropSVG {
    width: 75%;
    height: 75%;
}

.clipped-img {
clip-path: url(#raindropClipPath);
}