响应剪辑路径与内联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图像（黑色）放在内嵌，沿底部有曲线和响应。相比之下，红色矩形显示了作为剪辑路径应用（或者，而不是应用）的相同图像。

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剪辑路径的引用是剪辑路径定义本身，并且< 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 px宽的剪辑路径应用到标题。这可能只有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屋！