无法让剪辑路径与外部 svg 一起使用答案

【问题标题】：Can't get clip-path to work with external svg无法让剪辑路径与外部 svg 一起使用
【发布时间】：2020-01-06 04:56:03
【问题描述】：

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

我可以让它工作应用例如。一个多边形直接连接到 css，但是当我尝试将它链接到外部 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");
        }

请救救我，Stackoverflow 的英雄们。我已经挣扎了很久了。

【问题讨论】：

标签： html css svg clipping clip-path

【解决方案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)，但它不适用于不同域 (demo here) 的绝对 URL。我在规范中找不到对此的解释，这似乎是一个错误。

当 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>

【讨论】：