程序员经验分享-hwhale

具有内联 SVG 的响应式剪辑路径

2024-04-11

在具有背景的元素上（图像或纯色并不重要）：

<header id="block-header"></header>

我正在尝试使用 SVG 应用剪辑路径。为了实现这一点，我将 SVG 内联放入同一个元素中，如下所示：

<header id="block-header">
    …
    <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
    …
</header>

您可以运行下面的代码片段或检查JSFiddle http://jsfiddle.net/spliter/du7vtyc9/1/。您可以看到内嵌的原始 SVG 图像（黑色），底部有曲线并且响应灵敏。相反，红色矩形显示了应用（或者更确切地说，未应用）的相同图像作为clip-path.

我想我也误解了viewBox or preserveAspectRatio属性虽然无法找到这里到底出了什么问题。任何帮助，将不胜感激。

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
        <defs>
          <clipPath id="myClip">
            <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
          </clipPath>
        </defs>
    </svg>
</header>

对 SVG 剪辑路径的引用是指剪辑路径定义本身以及剪辑路径的尺寸或其他属性。<svg>在这种情况下毫无意义。

您的示例中发生的情况是，您正在将 4000 px 宽的剪辑路径应用到标题。宽度可能只有 900 像素左右。所以曲率是不可见的。

如果你想要一个响应式剪辑路径，你应该使用定义它clipPathUnits="objectBoundingBox".

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><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"/></svg>

<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
    <svg width="0" height="0">
        <defs>
          <clipPath id="myClip" 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>
        </defs>
    </svg>
</header>

在这里摆弄 http://jsfiddle.net/du7vtyc9/2/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

responsivedesign

clippath

具有内联 SVG 的响应式剪辑路径 的相关文章