Chrome 中的 SVG <use> 元素未显示答案

【问题标题】：SVG <use> elements in Chrome not displayedChrome 中的 SVG <use> 元素未显示
【发布时间】：2012-07-15 21:17:53
【问题描述】：

Chrome 似乎没有在内联 svg 中显示 <use> 元素。这是一个示例（下面的代码或在http://www.bobwyttenbach.com/chromeuse.html查看）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <g id="test1">
            <circle cx="100" cy="100" r="50" fill="red"/>
        </g>
    </defs>
    <g>
        <rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
        <use xlink:href="#test1" x="0" y="0"/>
    </g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>

红色圆圈不会出现在内联 svg 中，但会在同一个 svg 通过对象标签链接时出现。 Safari、Firefox、Opera 和 Internet Explorer 9 都能正确显示内联 svg。

我做错了吗？这是一个已知的 Chrome 错误吗（我没有找到它列出）？有什么解决方法吗？

【问题讨论】：

听起来像一个错误，在这里向 webkit 报告：bugs.webkit.org
这就是我从 chromium@googlecode.com 得到的回复：pdr@chromium.org 对问题 137666 的评论 #2：Chrome 中未显示 SVG 元素（Safari 可以）@ 987654323@ 已通过自动关闭使用标签更改修复：trac.webkit.org/changeset/118589 由于此中断的严重性，该修复已合并到 Chrome 20 中：trac.webkit.org/changeset/122596 我们计划在下一次 Chrome 20 更新中推送此问题，可能下周。抱歉休息，但好消息是修复迫在眉睫:)
更新：在当前版本的 Chrome (21.0.1180.57) 中修复，该版本使用 WebKit 537.1。在昨天的 Safari (6) 版本中新破解，它使用 WebKit 536.25。
Chrome 36.0.1985.143版本问题依然存在。这个问题有其他解决方案吗？
现在显然这是一个安全“功能”。

标签： google-chrome svg

【解决方案1】：

不知道这个问题是否仍然相关，但我最近遇到过这样的情况，我很确定其他人会遇到这种情况（尤其是那些第一次尝试使用 SVG 精灵的人） .

在我的例子中，我已将 16 个 SVG 图标手动加入到 sprite.svg 中，并在此文件中省略了重要的元信息：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

我根本没有第一行，我在第二行只有一个开头的<svg> 标记，没有元属性（xmlns 和xmlns:xlink）。当我带回所有这些省略的元信息时，我来自sprite.svg 的图形就开始正常显示了。

希望对某人有所帮助。

【讨论】：

【解决方案2】：

好的，所以我删除了我的上一篇文章，因为我错误地试图弄清楚为什么 use 元素对我有用，而不是对你有用。我能说的是，我使用的是这个源的修改版本，https://code.google.com/p/svg-edit/，所以简而言之，我的答案是走过去看看他们是如何做到的。我相信当您从他们的库中插入图像时，它会得到证明。

【讨论】：

感谢您的建议。我会进一步调查。乍一看还挺费解的。我可以在 svg-edit 工作区中显示一个 use 元素，但是一旦我将代码复制到我自己的 html 中，它就会停止工作。也许我可以找到正确的事物组合（它们在 svg 中有 svg 等）。
这是一个经过验证的 Chrome 错误，应该在下一个版本中修复（见上文）。我还发现了一种解决方法。而不是<use xlink:whatever.../> 可以说<use xlink:whatever...></use>。在我的测试中，这很有效，但我可能会忽略它并等待 Chrome 的下一个版本。
你确定不是svg的xml没有指定使用可以以/>结束？

【解决方案3】：

我花了很长时间调试没有显示的内联 svg 使用元素。 BobW 讨论的 chrome 错误此时似乎已修复。要完全消除由其他原因引起的相同问题，请尝试从 HTML 中注释掉 <base href="somethingsomethingsomething" /> 标记。

当然，这可能会破坏您网站上的每个相关链接，但现在会显示 <use> 元素。前进一步，后退半步：）

【讨论】：