javascript-generiertes SVG
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:
Code:
<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:
Code:
<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.:
Code:
<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.
javascript-generierte SVGs in Opera
... 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
