jQuery Elementzugriff in svg Object

Steusi · 23. Mai 2013

Hallo Leute,

ich bräuchte eine Hilfestellung. Ich möchte einen Mouseover generieren, wenn jemand in meinem svg einen Path berührt.
Hauptproblem, wie komme ich an die ID's aus dem svg, wenn ich es als Object in meine HTML-Seite einbinden.

Beispielhaft in Dateien:
Index.html

HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<object id="G22" data="G22.svg" type="image/svg+xml"></object>
</body>
</html>

script.js

Javascript:

$(document).ready(function() {
    //var svg = document.getElementById('G22').getSVGDocument();
	$(".room").mouseenter(function(){
          $(".room").css("background-color","yellow");
    });

});

svg

HTML:

<svg .....
<rect
     class="room"
     id="G2206"
     width="51.87051"
     height="57.32143"
     x="455"
     y="248.36313"
     inkscape:label="" />
  <path
     class="room"
     d="M 506.99556,115.64662 506.64201,305.85835 455.37677,307.27256 455.37677,342.98145 534.57272,342.98145 534.57272,115.64662 z"
     id="G2202"
     inkscape:connector-curvature="0"
     inkscape:label="G2202" />

Wie kann ich mit Javascript auf die id G2206 und id G2202 zugreifen?

Freue mich über Ratschläge. Danke

Quaese · 24. Mai 2013

Hi,

du könntest das SVG-Dokument stat in einem object-Element in einem iFrame einbinden. So hättest du unmittelbar Zugriff auf das enthaltene Dokument und dessen DOM.

Beispiel:

Code:

<!DOCTYPE html>
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
jQuery(function() {
    $('#G22').on('load', function(){
      var rect = $(this).contents().find('#G2202');

      rect.on('mouseenter', function(){
        var style = this.style;

        // native Methoden, siehe http://svg.tutorial.aptico.de/start3.php?knr=16&kname=Scripting&uknr=16.8&ukname=Methoden%20zur%20Manipulation%20von%20Attributen/Eigenschaften
        style.setProperty('fill', 'yellow');
      });

    });
});
</script>
</head>
<body>
<iframe id="G22" src="G22.svg"></iframe>
</body>
</html>

Ciao
Quaese

Steusi · 6. August 2013

Also so richtig klappt das auch nicht.
Kann man jQuery Funktionen, wie qtip2 sie anbietet auf normale JS-Variablen anwenden?
Ich schreibe mal meinen Code damit es klar wird:

HTML

HTML:

<html>
<head>
    <script src="MeinScript.js"></script>
    <script src="jquery.qtip.js"></script>
    <script src="imagesloaded.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css">
    <script src="jquery-1.10.2.min.js"></script>

</head>
<body onload="initSVG()">
<object id="G1-1" width="1200" height="500" type="image/svg+xml" data="G1-1.svg"></object>
</body>
</html>

So mein JavaScript:

Javascript:

function initSVG() {
    SVGDocument = document.getElementById("G1-1").contentDocument;

    // Alle Raumnummern vom SVG definieren
    var rooms = new Array('path3470','rect3419','rect3423','rect3435');

    for(var i=1; i<= rooms.length; i++){

        var room = SVGDocument.getElementById(rooms[i]);
        room.setAttributeNS(null,'fill','yellow');

        room.qtip({
            content: {
                text: 'TEST'
            },
            position: {
                my: 'top left',
                at: 'bottom right'
            }
        });
    }
}

Der erste Raum von SVG wird gelb gefährt, aber der Tooltip hier mit qtip2 nicht, kann mir dies jemand erklären?
Bin über jeden Tipp dankbar!

//edit: Also wenn ich es hier zusammen baue geht es:
http://jsfiddle.net/fDavN/6833/

Kann mir jemand meinen Fehler zeigen.

jQuery Elementzugriff in svg Object

Steusi

Nasenbär

Quaese

Moderator

Steusi

Nasenbär

Neue Beiträge