相关疑难解决方法(0)

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

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

我想我误解了viewBox或者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 …

我使用从Illustrator导出的相当复杂的SVG形状作为剪切路径.

问题是objectBoundingBox要求路径数据在0-1范围内,并且我的路径包含超出此范围的路径数据.这是我正在使用的:

<svg>
  <clippath id="clipping" clipPathUnits="objectBoundingBox">
    <path d="M228.6,94.8L176.8, 5.5c-2-3.5-5.8-5.5-9.9-5.5H63.2c-4.1, 0-7.8, 1.9-9.9,5.5L1.5,94.9c-2, 3.5-2,7.8,0, 11.4       l51.8, 89.8c2,3.5, 5.8,5.9,9.9,5.9h103.7c4.1, 0, 7.8-2.4,9.9-6l51.8-89.7C230.7, 102.8,230.7, 98.3,228.6,94.8z M192.8,104.4l-35.5, 
      61.5c-1.4,2.4-4,4.1-6.8, 4.1h-71c-2.8,0-5.4-1.7-6.8-4.1l-35.5-61.4c-1.4-2.4-1.4-5.5,0-7.9l35.5-61.5c1.4-2.4,4-4.1,6.8-4.1h71c2.8, 0, 5.4,1.7,6.8,4.1l35.5, 61.4C194.2,98.9, 194.2, 102, 192.8, 104.4z"/>
  </clippath>
</svg>

有没有一个简单的解决方案将其转换为0-1范围,以便我可以使用objectBoundingBox？

RE:评论.我能够将任意数量的变换应用于SVG元素,但它仍然不能与objectBoundingBox一起使用.例如:

<clippath id="clipping" transform="scale(1,1)" clipPathUnits="objectBoundingBox">