Raphael: SVG inline in XHTML

Beitrag lesen

SELF-Forum

SVG inline in XHTML

Raphael
– Informationen zu den Bewertungsregeln

Hallo,
ich versuche mich gerade daran, SVG direkt in XHTML zu schreiben.
Dies funktioniert auch einwandfrei im Firefox 2.0 und IE 6, wenn ich dem Firefox die Dateiendung .xhtml und dem IE .html gebe.

Jetzt versuche ich über JavaScript eine Linie einzufügen.

Für den IE siehts dann so aus:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
    <?import namespace="svg" implementation="#AdobeSVG" ?>
    <title>SVG-Datei inline in XHTML</title>
    <script type="text/javascript">
      function insertLine(id, x1, y1, x2, y2, color)
      {
      try
      {
        var line = document.createElement('line');
        line.setAttribute('id', id);
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('stroke', color);

document.getElementById('mySVG').appendChild(line);
      }
      catch (error) {alert(error.message);}
      }
    </script>
  </head>
  <body>
    <center>
      <h1>SVG inline in XHTML</h1>
      <svg:svg id="mySVG" viewBox="0 0 500 700" version="1.0">
       <svg:line id="id" x1="0" y1="0" x2="50" y2="70" stroke="black"></svg:line>
      </svg:svg>
    </center>
  <a href="#" onclick="insertLine('svgLine', 0, 0, 500, 700, 'black');">Linie einfuegen</a>
  </body>
</html>

Schau ich mir jetzt mit Hilfe der IE Developer Toolbar den DOM an, seh ich das die neue Linie dort eingefügt wurde. Sie wird mir aber nicht im Browser gezeichnet.

Weiss jemand Rat?
Im voraus Danke!
Und Gruss
Raphael

Beitrag melden
–
Informationen zu den Bewertungsregeln