javascript-generiertes SVG

[BlueJay]

Hallo Leute,

da ist so eine HTML-Seite, die via Javascript einige SVGs erstellt und in DIVs verpackt.

Mit HTML5 haben Firefox 4 und IE9 damit keine Probleme, aber in Opera 11 werden die Bilder nicht angezeigt.

Der in Opera generierte Text:

<div id="l_0" style="padding:0px; margin:0px; width:64px; height:96px; float:left">
<?xml version="1.0" encoding="UTF-8"?>
<SVG width="64" height="96" viewBox="0 0 125 175" xml:space="preserve" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<DEFS>
<LINEARGRADIENT id="v0" x1="0%" x2="100%" y1="0%" y2="100%">
<LINEARGRADIENT id="v1" x1="0%" x2="100%" y1="0%" y2="100%">
<LINEARGRADIENT id="v2" x1="0%" x2="100%" y1="0%" y2="0%">
<LINEARGRADIENT id="v3" x1="0%" x2="100%" y1="0%" y2="0%">
<LINEARGRADIENT id="v4" x1="0%" x2="0%" y1="0%" y2="100%">
<LINEARGRADIENT id="v5" x1="0%" x2="0%" y1="0%" y2="100%">
<LINEARGRADIENT id="grad0" x1="0%" x2="100%" y1="0%" y2="100%">
<SYMBOL id="platte_000" stroke-width="2" stroke="#000000">
</DEFS>
<USE xlink:href="#platte_000" transform="translate(0,0)">
<POLYGON points="100,0 125,25 125,175 100,150" fill="url(#v2)" stroke="none" opacity="1">
</USE>
</SVG>
</div>

(ist aus dem Viewer abgepflückt, nicht alle Ebenen sind offen)
Wenn man das fertige SVG als Referenz in die Seite verlinkt, geht es.
Verlange ich da zuviel von einem "modernen" Browser?

Die gesamte Seite:
http://www.gamecraft.de/svg_mahjongg/index.htm


Gruß,
Ulrike

Was mir gerade noch auffiel:
Opera macht aus dem Hauptteil eine wüste Verschachtelung:

<SYMBOL id="platte_000" stroke-width="2" stroke="#000000">
<RECT x="5" y="5" width="100" height="150" rx="3" ry="3" stroke="#333333" fill="#333300">
<RECT x="0" y="0" width="100" height="150" rx="3" ry="3" stroke="#000000" fill="url(#v0)">
<RECT x="10" y="10" width="80" height="130" stroke="#223311" fill="none">
<RECT x="15" y="15" width="70" height="120" fill="none">
<POLYGON points="20,20 80,20 80,130 20,130" fill="url(#grad0)">
<POLYGON points="45,20 55,20 55,130 45,130" fill="url(#v0)" stroke="2" opacity="1">
<POLYGON points="45,20 55,20 80,130 70,130" fill="url(#v0)" stroke="2" opacity="1">
<POLYGON points="45,20 55,20 30,130 20,130" fill="url(#v0)" stroke="2" opacity="1">
<PATH d="M20,20 Q50,80 80,20 z" fill="url(#v0)" stroke="2" opacity="1"/>
</POLYGON>
</POLYGON>
</POLYGON>
</POLYGON>
</RECT>
</RECT>
</RECT>
</RECT>
</SYMBOL>
</DEFS>

bei den anderen Browsern ist der Teil schön in der Zeichenreihenfolge hintereinander aufgereiht.:

<symbol id="platte_000" stroke="#000000" stroke-width="2">
 <rect fill="#333300" stroke="#333333" x="5" y="5" width="100" height="150" rx="3" ry="3"/>
 <rect fill="url(#v0)" stroke="#000000" x="0" y="0" width="100" height="150" rx="3" ry="3"/>
...

wie es ja auch gedacht war.

[undefined]

Das ist ganz klar ein Vector, Map oder Iteratorfehler in Opera.
Am besten als Bug melden.

[BlueJay]

... ich schreibe mal hier weiter.

Habe also Opera die Langform der Gradienten und Rechtecke angeboten, und er konvertiert sie (wie Mozilla) intern zur Kurzform, diesmal korrekt verschachtelt!

Vom Darstellen hält er aber nix!

Gruß,
Ulrike

[BlueJay]

Da ist dann noch diese Bug in Mozilla, dass bei längerem Herumklicken ein Hintergrundbild, was für einen SVG-Steinsatz benötigt wird, einfach unter den Tisch fallengelassen wird.

Meine ersten Versuche mit Chrome zeigten, dass dieser ebenfalls das Hintergrundbild vergisst, sobald das Layer, in dem das SVG sitzt, einmal hidden, dann wieder visible geschaltet wurde.

IE9 zeigt sich da unbeeindruckt und zieht sein Ding durch, IMHO noch die beste inline-SVG-Unterstützung.

Zu sehen im Tileset Granat und Mondrian:
svg_mahjongg mondrian
Ist das Hintergrundbild noch geladen, leuchten die Steine, sonst erscheinen sie bläulich.

Gruß,
Ulrike