# 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

```
<!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

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

});
```

svg

```
<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:

```
<!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>
<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:

```
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.


----------

