COLOSSUS: SVG-Elemente per JavaScript erzeugen

SELF-Forum

SVG-Elemente per JavaScript erzeugen

COLOSSUS
– Informationen zu den Bewertungsregeln

Guten Morgen miteinander.

Folgendes Problem:

Ich kann in meiner Seite SVG-Elemente mittels "Inline-Code" einbinden, das klappt wunderbar.

Nun möchte ich per JavaScript weitere SVG-Elemente erstellen und in die Seite integrieren. Wenn ich die onclick-Funktion (siehe unten) ausführe, dann sehe ich mittels Firebug auch, dass das neu erstellte SVG-Element im Quellcode korrekt eingebunden wird.

Nur stellt es der Firefox leider nicht dar.

Wenn ich aber vorher im Quellcode statisch zumindest den <svg>-Block erstelle, kann ich nachträglich per Javascript z.B. das Rectangle-Element in den SVG-Block einhängen, das wird dann auch angezeigt.

Müssen diese SVG-Elemente direkt beim Laden der Seite immer vorhanden sein?

  
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <script type="text/javascript">  
            function addSvg(element)  
            {  
                var svgElement = document.createElement("svg");  
                svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');  
                svgElement.setAttribute('version', '1.1');  
                svgElement.setAttribute('width', '100px');  
                svgElement.setAttribute('height', '100px');  
                svgElement.setAttribute('viewBox', '0 0 100 100');  
  
                var rectElement = document.createElement("rect");  
                rectElement.setAttribute('x', '50');  
                rectElement.setAttribute('y', '50');  
                rectElement.setAttribute('width', '40');  
                rectElement.setAttribute('height', '40');  
  
                svgElement.appendChild(pathElement);  
                element.appendChild(svgElement);  
            }  
        </script>  
        <title>test</title>  
    </head>  
    <body>  
        <div onclick="addSvg(this); style="width: 200px; height: 200px;">  
          <!-- Dieses SVG-Objekt stellt er korrekt dar. -->  
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">  
                <rect x="0" y="0" width="40" height="40"/>  
            </svg>  
        </div>  
    </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. SVG-Elemente per JavaScript erzeugen

    COLOSSUS
    – Informationen zu den Bewertungsregeln

    Hallo nochmal.

    Ist ja wieder typisch...

    Vor meiner Frage habe ich natürlich schon länger am Quellcode gebastelt und auch im Netz nach Lösungen gesucht.

    Dann poste ich hier mein Problem, suche aber weiter im Netz und finde kurze Zeit später tatsächlich etwas:

    Statt den 'createElement'-Funktionen muss man das svg- und path-Element wie folgt einbinden:

    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');  
  
[...]  
  
var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');

    Nun erscheint das Element auch, wenn ich auf das DIV klicke.

    Sorry, für meine anscheinend doch zu geringe Geduld.

    Aber vielleicht kann mein Posting anderen weiterhelfen, wenn sie auch mal nach so etwas suchen.

    Grüße und schönen Tag noch.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. SVG-Elemente per JavaScript erzeugen

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber COLOSSUS,

      var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

      [...]

      var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');

        
aha, dafür sind also diese namespace-Funktionen da... wieder etwas dazugelernt.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. SVG-Elemente per JavaScript erzeugen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@COLOSSUS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Möchtest du vielleicht einen passenden DOCTYPE verwenden? [XHTML+MathML+SVG]

    Live long and prosper,
    Gunnar

    --
    Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln