Wenn in Google Chrome 24 ein von einem <use>-Element referenziertes Element später im Dokument definiert wird, wird es nicht gerendert. In der Dokumentation zum use Element habe ich nichts in Bezug auf die Elementreihenfolge bemerkt.Ist Element-Bestellung wichtig für Inline-SVG?
Ist dieses Verhalten nicht definiert und sollte nicht erwartet werden, dass es in allen Browsern konsistent ist oder nur ein Bug in Chrome?
Ein Beispiel dafür ist unten zu sehen (leicht modifiziert von this Frage). Blauer Kreis rendert wie erwartet, rot, nicht so sehr. Firefox 17 und IE 9 machen beide Kreise so, wie ich es erwarten würde. Wenn derselbe Inhalt wie ein externer <img /> referenziert wird, werden beide Kreise ebenfalls gerendert.
<!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>
UPDATE: Scheint in Chrome zu arbeiten 39.
_i think_, Reihenfolge ist wichtig, zumindest sagt spec, dass - http://www.w3.org/TR/SVG/render.html#RenderingOrder - so haben Sie, _probably_, in einem weiteren Webkit-Fehler. – c69
Für das Malen haben Sie absolut Recht, sie tun es. In diesem Fall referenziere ich nur ein anderes Element (das nicht wirklich gemalt wird). Nicht sicher, ob Sie Elemente deklarieren müssen, bevor Sie sie verwenden können (wie Old-School-Compiler, bei denen Sie nur Funktionen aufrufen können, die Sie deklariert haben). – R0MANARMY
Ich stimme dir zu, das muss ein Fehler sein. Der "xlink: href" -Referenzierungsmechanismus hat leider einige Fehler in Webkit. –