带有内联 SVG 的响应式剪辑路径 [英] Responsive clip-path with inline SVG

问题描述

在具有背景的元素上(图像或纯色并不重要):

On an element with a background (image or solid color don't really matter):

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

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

I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:

<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.您可以看到原始 SVG 图像(黑色)嵌入内联，底部具有曲线并且具有响应性.相比之下，红色矩形显示应用(或者更确切地说，未应用)作为 clip-path 的相同图像.

You can run the code snippet below or check the JSFiddle. You can see original SVG image (in black) put inline, having curviness along the bottom and being responsive. In contrast, the red rectangle shows the same image applied (or, rather, not applied) as a clip-path.

我想我误解了 viewBox 或 preserveAspectRatio 属性，但无法找到这里究竟有什么问题.任何帮助将不胜感激.

I guess I misunderstand either viewBox or preserveAspectRatio attributes though can not find what is exactly wrong here. Any help would be appreciated.

#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 剪辑路径的引用是对剪辑路径定义本身的引用， 的尺寸或其他属性是没有意义的在这种情况下.

References to SVG clip paths are to the clip path definitions themselves and the dimensions or other attributes of the <svg> are meaningless in this context.

在您的示例中发生的情况是您将 4000 像素宽的剪辑路径应用于标题.这可能只有 900 像素宽的数量级.所以曲率是不可见的.

What is happening in your example is that you are applying a 4000 px wide clip path to your header. Which is probably only of the order of 900 px wide. So the curvature isn't visible.

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

If you want a responsive clip path, you should define it using 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>    

在这里小提琴

这篇关于带有内联 SVG 的响应式剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！