Question

我正在尝试获取由外部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的英雄。我一直在苦苦挣扎。

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），但不适用于指向其他域（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>

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

1 个答案: