无法获取剪辑路径以使用外部 svg

Question

我正在尝试获取由外部 svg 文件裁剪的图像。

我可以让它工作应用例如。一个直接指向 css 的多边形，但是当我尝试 link 它到外部 svg 时，它不起作用。

这是我需要剪裁的图片：

<img src="{{ asset('/images/hero.jpg') }}" class="hero-image">

这是我的 svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1366 706" style="enable-background:new 0 0 1366 706;" xml:space="preserve">
<defs>
    <clipPath id="bg-clipping">
        <path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
    </clipPath>
</defs>

</svg>

这是我的 css

.hero-image {
            @apply absolute w-full h-full;
            clip-path: url("#bg-clipping");
        }

请拯救我，Whosebug 的英雄们。我现在已经挣扎了很长时间了。

Answer 1

如果 SVG 在不同的 URL 上，您可能就不走运了。 Firefox 是目前唯一支持此功能的浏览器 (CanIUse chart footnote 2)。

如果您同意它只在 Firefox 中工作，您可以像这样定义 clip-path。

.hero-image {
  clip-path: url("path/to/svg.svg#bg-clipping");
}

有趣的警告：虽然它确实适用于相对 URL 的 (as demonstrated here), it doesn't work with absolute URL's to a different domain (demo here)。我在规范中找不到对此的解释，这似乎是一个错误。

当 SVG 与图像位于同一页面时，它应该可以正常工作。浏览器支持更好。

body {
  margin: 0;
}

.hero-image {
  min-height: 706px;
  clip-path: url("#bg-clipping");
}

<img src="https://picsum.photos/id/1015/1366/706" class="hero-image">


<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1366 706">
<defs>
    <clipPath id="bg-clipping">
        <path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
    </clipPath>
</defs>
</svg>

无法获取剪辑路径以使用外部 svg

Can't get clip-path to work with external svg

html

css

svg

clipping

clip-path