1

我有一个非常奇怪的 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>

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

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

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

4

1 回答 1

1

原来它是<base>头部中的一个标签，与相对 url 混淆。

与此问题类似的问题SVG Gradient 在 HTML 页面中有 BASE 标记时变黑？

谢谢

于 2018-11-06T10:53:57.307 回答