10

在 Google Chrome 24 中，如果元素引用的<use>元素稍后在文档中定义，则不会呈现该元素。我没有注意到元素文档中与元素顺序相关的任何use内容。

这种行为是否未定义，不应该在浏览器之间保持一致，或者只是 Chrome 中的一个错误？

下面可以看到一个例子（从这个问题略微修改）。蓝色圆圈按预期呈现，红色，不是那么多。正如我所料，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 中工作。

4

1 回答 1

0

The Rendering Order depends on the element order, so it looks strong like a bug in chrome: SVG Rendering Order 1.0, Part 2: Language

于 2013-09-08T19:35:12.333 回答