SVG 形状路径内的图像在 Safari 中呈现为黑色答案

【问题标题】：Image inside SVG shape path renders as black in SafariSVG 形状路径内的图像在 Safari 中呈现为黑色
【发布时间】：2019-04-07 10:16:11
【问题描述】：

我有一个非常奇怪的 Safari 错误。我在 SVG 形状路径中有一个图像，代码如下：

<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
        </pattern>
    </defs>
    <path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>

图像在主页上呈现良好，但所有其他页面上的相同代码将形状呈现为黑色并且没有图像，尽管在检查器中我可以看到图像已加载。其他浏览器都可以。

左边的形状是它在主页上正确呈现的示例，右边是它在其他页面上呈现的方式。相同的模板，相同的代码。

有什么想法吗？已经拉了几个小时的头发了，谢谢。

【问题讨论】：

无法在 Safari 12.0.1 上重现。您使用的是哪个版本？请注意，Windows 版 Safari 已有六年多的历史，没有任何更新，它有点像 IE8（难怪你有 SVG 怪癖）。
我在 Mac 上使用的是版本 12.0 (14606.1.36.1.9)，在 iOS Safari 中也遇到了同样的问题。
在这里的 sn-p 中你把它弄黑了吗？否则，您确定每个页面中都是这个确切的标记吗？（使用 wikimedia 上托管的图像）
这很有趣，上面的 SVG 代码或样式表中没有引用黑色填充，但即使禁用了所有样式，它仍然显示为黑色。在此示例中，我使用了来自 wiki 的图像，因为我正在测试它与动态加载图像无关。在所有页面上加载完全相同的标记。
黑色是默认的填充样式。因此，如果您的图像未加载，它将是黑色的。现在，由于您没有显示实际代码，我们只能猜测为什么图像加载在一个页面上而不是其他页面上。一种这样的猜测可能是在图像的 href 中使用相对路径

标签： image safari fill sag

【解决方案1】：

原来是头部中的<base> 标记与相对网址混淆。

与本期类似的问题SVG Gradient turns black when there is a BASE tag in HTML page?

谢谢

【讨论】：