Google chrome 为什么我的SVG文档在Google Chrome中使用自身的副本来代替图像？

我有一个SVG文档

在firefox上，一切正常。然而，谷歌chrome似乎认为这句话：

<image ... xlink:href="/textures/Cube top.png" />

参考资料<代码>http://minecraft-cube.comuv.com/index.svg，
不<代码>http://minecraft-cube.comuv.com/textures/Cube top.png， 导致意外的递归

显然，如果它使用我指定的图像，我更喜欢它

这是怎么回事

---

---

编辑：在Chrome中归档错误。不过可能还是做错了什么。

我认为你的问题存在于其他地方。以下是正确显示链接图像的文档简化版本：

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="top-tile">
            <image width="1" height="1" x="-0.5" y="-0.5" class="face"
             xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" />
        </g>
    </defs>
    <g transform="scale(16)">
        <g transform="translate(1.5, 1.5)">
            <use xlink:href="#top-tile" />
        </g>
    </g>
</svg>

如果我使用图像的绝对路径并删除

剪辑路径

属性，我会在Safari和Chrome中看到您的图像。如果我把

剪辑路径

放回去，我会在Safari中看到所有的黑色填充，但在Chrome中大概什么是正确的。如果放入绝对路径（例如

xlink:href=”http://minecraft-cube.comuv.com/textures/Cube top.png“

）它在Chrome中适用吗

现在我知道你想做什么了，我希望我能给你+2来制作一个折叠的Minecraft瓷砖：）

编辑下一步：

从文件名中删除空格

尝试使用相对路径而不是绝对路径

现在我们对核心问题有了更好的了解，谷歌需要更多的答案（我还没有找到任何答案）

将其简化为一个微不足道的测试用例，并与Chrome进行对比

---

编辑2：如更新的问题所示，@Eric做到了。如该bug报告所示，较新版本的Chrome显示了预期的结果。此外，使用基于像素的显式图像高度和宽度以及基于像素的SVG视口和尺寸在所有测试的浏览器中都能正常工作。

我认为您的问题存在于其他地方。以下是正确显示链接图像的文档简化版本：

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="top-tile">
            <image width="1" height="1" x="-0.5" y="-0.5" class="face"
             xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" />
        </g>
    </defs>
    <g transform="scale(16)">
        <g transform="translate(1.5, 1.5)">
            <use xlink:href="#top-tile" />
        </g>
    </g>
</svg>

如果我使用图像的绝对路径并删除

剪辑路径

属性，我会在Safari和Chrome中看到您的图像。如果我把

剪辑路径

放回去，我会在Safari中看到所有的黑色填充，但在Chrome中大概什么是正确的。如果放入绝对路径（例如

xlink:href=”http://minecraft-cube.comuv.com/textures/Cube top.png“

）它在Chrome中适用吗

现在我知道你想做什么了，我希望我能给你+2来制作一个折叠的Minecraft瓷砖：）

编辑下一步：

从文件名中删除空格

尝试使用相对路径而不是绝对路径

现在我们对核心问题有了更好的了解，谷歌需要更多的答案（我还没有找到任何答案）

将其简化为一个微不足道的测试用例，并与Chrome进行对比

---

编辑2：如更新的问题所示，@Eric做到了。如该bug报告所示，较新版本的Chrome显示了预期的结果。此外，使用显式基于像素的图像高度和宽度以及基于像素的SVG视口和尺寸在所有测试的浏览器中都可以使用。

您链接到的SVG文件中没有任何

bmp

文件<代码>卷曲--静默http://minecraft-cube.comuv.com/index.svg |grep bmp#无输出。如果是这样的话，你应该用

%20

对名称中的空格进行URL编码。我知道了，你将图像从“bmp”重命名为“png”。我已经相应地更新了你的问题。此外，您的SVG@Phrogz:Yep认为问题可能在于位图图像。显然不是，但PNG更适合。@Phrogz:Curiouser和Curiouser:似乎是

元素的结果。应在网格中显示四个瓷砖。顺时针方向：

标记，

中包含

的组的

，

中第一个磁贴的

，

的

。只有第一个shows@Eric我在该文档中看到了四幅在Windows上使用Google Chrome v9.0的图像。（虽然结果与Safari不同；在Chrome中，除了左上角以外，其他都比Safari小。）如果您使用的是较旧的版本，可能是一个需要修复的旧错误。您链接到的SVG文件中没有任何

bmp

文件<代码>卷曲--静默http://minecraft-cube.comuv.com/index.svg |grep bmp#无输出。如果是这样的话，你应该用

%20

对名称中的空格进行URL编码。我知道了，你将图像从“bmp”重命名为“png”。我已经相应地更新了你的问题。此外，您的SVG@Phrogz:Yep认为问题可能在于位图图像。显然不是，但PNG更适合。@Phrogz:Curiouser和Curiouser:似乎是

元素的结果。应在网格中显示四个瓷砖。顺时针方向：

标记，

中包含

的组的

，

中第一个磁贴的

，

的

。只有第一个shows@Eric我在该文档中看到了四幅在Windows上使用Google Chrome v9.0的图像。（虽然结果与Safari不同；在Chrome中，除了左上角以外，其他所有的都比Safari小。）如果您使用的是旧版本，可能是一个需要修复的旧bug。是的，绝对路径有效。然而，我真的不想到处乱扔绝对URL。我还尝试添加

xml:base=”http://minecraft-cube.comuv.com/“

到我的

svg

元素，但这也不起作用。想法？而且，这不仅仅是一块折叠的地雷瓦片。这是一个弹出式雷击机tile@Eric更酷！我已经用其他建议更新了答案。：）我想我现在只使用绝对URL。谢谢你的提示。它应该是什么样子是的，绝对路径有效。怎么