COLOSSUS: SVG-Elemente per JavaScript erzeugen

Beitrag lesen

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