svg object

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>

    <style>

      object{
        border: 1px solid #ccc;
        width:20em;
      }
      .active{
        fill:#f00;
      }
    </style>
  </head>

  <body>

<h1>Svg object</h1>
<object id="object" data="test.svg" type="image/svg+xml" ></object>


<script>

var svgObject = document.getElementById("object");
// get svg content 
svgObject.onload  = (e)=>{
    let svgDoc = svgObject.contentDocument;
    let rect = svgDoc.querySelector('rect');

    //add click event
    rect.addEventListener('click', e=>{
      e.currentTarget.classList.toggle('active')
    })
}

svgObject.addEventListener("load",function(){

      console.log(svgObject)

    // get the inner DOM of svg


});// Add your code here


  </script>
  </body>
</html>

/* Add your styles here */

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

    <style>
      .active{
        fill:#f00;
      }
    </style>

<rect x="0" y="0" width="100" height="100" fill="green"/>
</svg>