SVG <image> 类在 Safari 中不起作用

Question

我在 Safari 的<svg>中使用<image>元素。

虽然<image>显示在Chrome中，但它不会显示在Safari中。

这是我的代码

.swatch {
width: 10rem;
}
.swatch-base {
width: 100%;
height: 100%;
}
.filter-swatch {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
}

<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">
<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0"></image> 
<rect class="filter-swatch" fill="#ecd5cf"></rect>

</svg>

请注意，在我的代码中，我已经内联了图像，因此不使用外部资源，因此当图像不再存在于我的服务器上时，这个答案仍然有用。不过，在生产中，我引用的是图像而不是内联它。

如何按在 Chrome 中显示的方式显示图像？

Answer 1

对于 Safari，图像上的宽度和高度必须指定为属性，而不是通过 CSS。

在图像上使用CSS是SVG 2中的新功能，Safari尚未实现SVG 2的这一部分。

.swatch {
width: 10rem;
}
.filter-swatch {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
}

<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">
<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0" width="100%" height="100%"></image> 
<rect class="filter-swatch" fill="#ecd5cf"></rect>

</svg>