Thorsten Sperber: Zugriff von außen auf den SVG-DOM

SELF-Forum

Zugriff von außen auf den SVG-DOM

Thorsten Sperber
– Informationen zu den Bewertungsregeln

Hi,

alle Versuche, auf den SVG-DOM zuzugreifen, scheitern kläglich. Die meisten Beispiele im Internet funktionieren nicht in den Browsern unter Linux (es gibt das Plugin von Adobe (das auch noch schlecht gestaltete SVGs akzeptiert) halt nur für den IE) und die Dokumentation ist auch ziemlich dünn (wenn man vom w3c absieht, aber ich will darüber eigentlich keine Diplomarbeit schreiben).

Also, was ich bisher habe:

<embed name="Example1" width="750" height="300" src="fahrzeug-full.svg" TYPE="image/svg+xml">

auf das 'foo' greife ich dann so zu:

function drawSVG()
 {

alert(window.frames[0].document.getElementById('heading1').firstChild.data);

var foo = document.Example1.getSVGDocument();
 function drawPolygon(pPoints, pFillColor, pStrokeColor) // Punkte[], Farbe innen, Farbe rand
  {
var poly = foo.createElement('rect');
  var attrWidth = foo.createAttribute('width');
  attrWidth.nodeValue = "150";
  poly.setAttributeNode(attrWidth);
  var attrHeight = foo.createAttribute('height');
  attrHeight.nodeValue = "150";
  poly.setAttributeNode(attrHeight);
  var attrX = foo.createAttribute('x');
  attrX.nodeValue = "100";
  poly.setAttributeNode(attrX);
  var attrY = foo.createAttribute('y');
  attrY.nodeValue = "150";
  poly.setAttributeNode(attrY);
  //poly.attr('fill', 'grey').attr('stroke', 'black').attr('points', '100,200 90,50 90,115 40,115 40,85 50,50');

//<rect x="100" y="200" width="150" height="150"></rect>
  return poly;
  }

foo.getElementById('zugmaschine').appendChild(drawPolygon());
 //~ window.frames[0].document.getElementById('zugmaschine').appendChild(drawPolygon);
 }

Firefox (Firebug) spuckt nicht rum, passieren tut aber auch nichts. Weiß jemand, warum?

gruß, Thorsten

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zugriff von außen auf den SVG-DOM

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo,

    foo.getElementById('zugmaschine').appendChild(drawPolygon());
    //~ window.frames[0].document.getElementById('zugmaschine').appendChild(drawPolygon);
    }

    wolltest du hier einen Knoten oder eine Funktion einhängen?

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zugriff von außen auf den SVG-DOM

      plan_B
      – Informationen zu den Bewertungsregeln

      foo.getElementById('zugmaschine').appendChild(drawPolygon());
      //~ window.frames[0].document.getElementById('zugmaschine').appendChild(drawPolygon);
      }

      wolltest du hier einen Knoten oder eine Funktion einhängen?

      sorry - habe mich verguckt, das ist ok.

      Gruß plan_B

      --
           *®*´¯`·.¸¸.·
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Zugriff von außen auf den SVG-DOM

    ThomasM
    +1 Informationen zu den Bewertungsregeln

    Hallo Thorsten,

    alle Versuche, auf den SVG-DOM zuzugreifen, scheitern kläglich.

    Probiere es in der genannten embed-Variante

    <body onload="SVGTest()">  
  <embed name="Example1" width="750" height="300" src="test.svg" type="image/svg+xml">  
</body>

    mit diesem eingebundenen SVG-Dokument

    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full">  
  <circle cx="50" cy="50" r="20" fill="#F00"/>  
</svg>

    und folgender JS-Testfunktion

    function SVGTest()  
{  
  var svgns="http://www.w3.org/2000/svg";  
  var svgdoc=document.embeds["Example1"].getSVGDocument();  
  var svgroot=svgdoc.documentElement;  
  
  var myrect=svgdoc.createElementNS(svgns,"rect");  
  myrect.setAttribute("x","100");  
  myrect.setAttribute("y","15");  
  myrect.setAttribute("width","150");  
  myrect.setAttribute("height","75");  
  myrect.setAttribute("fill","#090");  
  
  svgroot.appendChild(myrect);  
}

    Neben dem statischen roten Kreis sollte dynamisch ein grünes Rechteck folgen, auch im Firefox.

    Grüße,
    Thomas

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Zugriff von außen auf den SVG-DOM

      Thorsten Sperber
      – Informationen zu den Bewertungsregeln

      Hi,

      Probiere es in der genannten embed-Variante

      hab ich doch?

      mit diesem eingebundenen SVG-Dokument
      und folgender JS-Testfunktion

      ich glaubs nicht...das funktioniert :D

      Danke :) kannst du mir sagen, wo man ne anständige Doku zu SVG findet?

      setAttribute() kannte ich noch garnicht. Da hab ich mich doch echt mit createAttribute gequält...aber das liegt wohl an den JS-Wissenslücken.

      gruß, Thorsten

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zugriff von außen auf den SVG-DOM

        ThomasM
        +1 Informationen zu den Bewertungsregeln

        Hallo Thorsten,

        kannst du mir sagen, wo man ne anständige Doku zu SVG findet?

        Bei SelfSVG und auf den dort verlinkte Seiten.

        Grüße,
        Thomas

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln