jule: SVG in SVG einbetten

SELF-Forum

SVG in SVG einbetten

jule
– Informationen zu den Bewertungsregeln

Hi,
ich möchte in einem externen SVG-Dokument, welches in ein anderes SVG Dokument eingebettet ist, auf das DOM mit JavaScript zugreifen.
Das Problem ist, dass die SVG Datei nur als image eingebettet ist und somit als Unterknoten x,y, width und height

hat...
Hat jemand eine Idee?

danke sagt jule

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. SVG in SVG einbetten

    Thomas Meinike
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich möchte in einem externen SVG-Dokument, welches in ein anderes SVG Dokument eingebettet ist, auf das DOM mit JavaScript zugreifen.
    Das Problem ist, dass die SVG Datei nur als image eingebettet ist und somit als Unterknoten x,y, width und height

    Probiere mal die folgenden Beispiel-Dokumente aus. test1.svg bindet via image-Element test2.svg mit einem roten Kreis ein. Klicke auf den Text "Klick mich!". Es wird nun ueber die ID des Bildes auf das Document-Objekt des eingebundenen Dokuments zugegriffen und dort der Kreis angesprochen und dessen r-Attributwert (also der Radius) angezeigt.

    test1.svg:

    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>Test by TM 12/03</title>
      <desc>SVG-Dokument test1.svg - bindet test2.svg ein</desc>

    <image id="abc" xlink:href="test2.svg" x="0" y="0" width="500" height="300"/>
      <text x="100" y="85" onclick="alert(document.getElementById('abc').getSVGDocument().getElementsByTagName('circle').item(0).getAttribute('r'))">Klick mich!</text>

    </svg>

    test2.svg:

    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>Test by TM 12/03</title>
      <desc>SVG-Dokument test2.svg - wird von test1.svg eingebunden</desc>

    <circle cx="50" cy="80" r="30" style="fill: #F00"/>

    </svg>

    BTW: Es handelt sich um die analoge Technik des Zugriffs auf ein in HTML-Dokument eingebundenes SVG-Dokument mittels getSVGDocument().

    MfG, Thomas

    --
    SVG - Learning By Coding
    http://svglbc.datenverdrahten.de/
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln