Interactive SVG via HTML object tag
<p>I want to create an interactive SVG HTML-Page. For example: If I click on a rectangle, I want to display a new SVG-Image.</p>

<p>Because my SVG-Files are separate, I want to include them via the HTML-Object Tag.</p>

<p>I've browsed the web for a while, but I just fail to adress single elements of my SVG-File to change their attributes or add functions etc.</p>

<p>My HTML-File:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;  
&lt;object data="svg-test.svg" type="image/svg+xml" id="svg" width="100%" height="100%"&gt;&lt;/object&gt;

    &lt;script&gt;
    window.onload=function() {
    // Get the Object by ID
    var svgObject = document.getElementById("svg");
    // Get the SVG document inside the Object tag
    var svgDoc = svgObject.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("svgID");
    // Set the colour to something else
    svgItem.setAttribute("fill", "lime");
    };
    &lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The SVG-File:</p>

<pre><code>&lt;svg width="900" height="600"  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

    &lt;rect x="100" y="120" width="200" height="350"      
    style="fill:white;stroke:black;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0"  
    id="svgID"/&gt;

 &lt;/svg&gt;
</code></pre>

<p>Instead of using <em>contentDocument</em> I also tried <em>getSVGDocument()</em> but this also did not work.</p>