【发布时间】：2012-12-13 04:15:27
【问题描述】：
在 Google Chrome 24 中，如果由 <use> 元素引用的元素稍后在文档中定义，则不会呈现该元素。在use 元素的文档中，我没有注意到任何与元素顺序相关的内容。
这种行为是否未定义，不应该在浏览器之间保持一致，或者只是 Chrome 中的一个错误？
可以在下面看到一个示例（根据this 问题稍作修改）。蓝色圆圈按预期呈现，红色，不是那么多。正如我所料，Firefox 17 和 IE 9 渲染了两个圆圈。当相同的内容被引用为外部<img /> 时，两个圆圈也会渲染。
<!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="test2">
<circle cx="50" cy="50" r="25" fill="blue"/>
</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"/>
<use xlink:href="#test2" x="0" y="0"/>
</g>
<defs>
<g id="test1">
<circle cx="100" cy="100" r="25" fill="red"/>
</g>
</defs>
</svg>
</body>
</html>
更新：似乎可以在 Chrome 39 中使用。
【问题讨论】：
-
我认为，顺序很重要，至少规范说 - w3.org/TR/SVG/render.html#RenderingOrder - 所以你有，可能，遇到另一个 webkit错误。
-
对于绘画，你是绝对正确的，他们确实如此。在这种情况下，我只是引用另一个元素（实际上不会被绘制）。不确定是否必须先声明元素才能使用它们（例如旧式编译器，您只能调用已声明的函数）。
-
我同意你的观点，这一定是一个错误。遗憾的是，
xlink:href引用机制在 Webkit 中存在一些缺陷。 -
您可以将其发布到：bugs.webkit.org、code.google.com/p/chromium/issues/list，以防您真的认为这是一个错误。我对另一个 SVG 相关问题做了同样的事情，他们将错误分配给了开发人员。
-
@Matthias 是的，我知道，只是想确保在提交错误之前我没有遗漏任何内容。
标签： google-chrome svg