In Google Chrome 24, se un elemento a cui fa riferimento un elemento <use>
viene definito successivamente nel documento, non viene reso. Non ho notato nulla relativo all'ordine degli elementi nella documentazione per l'elemento use
.L'ordine degli elementi è importante per SVG in linea?
Questo comportamento non è definito e non dovrebbe essere previsto che sia coerente tra i browser o solo un bug in Chrome?
Di seguito è riportato un esempio (leggermente modificato dalla domanda this). Il cerchio blu rende come previsto, rosso, non così tanto. Firefox 17 e IE 9 rendono entrambi i cerchi come mi sarei aspettato. Quando lo stesso contenuto è referenziato come esterno <img />
, entrambi i cerchi vengono visualizzati anche.
<!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: sembra funzionare in Chrome 39.
_i penso_, l'ordine è importante, almeno le specifiche dicono che - http://www.w3.org/TR/SVG/render.html#RenderingOrder - così hai, _probabilmente_, esegui ancora un altro bug del webkit. – c69
Per la pittura, hai assolutamente ragione, lo fanno. In questo caso sto solo facendo riferimento a un altro elemento (che in realtà non verrà dipinto). Non sei sicuro di dover dichiarare gli elementi prima di poterli usare (come i compilatori di vecchia scuola in cui puoi solo chiamare le funzioni che hai dichiarato). – R0MANARMY
Sono d'accordo con te, questo deve essere un bug. Il meccanismo di riferimento 'xlink: href' ha purtroppo alcuni difetti in Webkit. –