title: Manipulate elements in SVG file (object) by JavaScript or JQuery
body: <p>I have a challenge of manipulating SVG file (object) in html code. There are solutions in Snap, Raphael but I need to do it directly by either JavaScript or JQuery. That's what I have so far:</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;object id="testSVG" data="image_library/grandstaff_drawing_only.svg"       
  type="image/svg+xml" height=100% width=100%"&gt;
  &lt;img src="image_library/alto-clef.png" /&gt;
  &lt;/object&gt;
  
   &lt;script&gt;
  
  window.onload=function() {
  // Get the Object by ID
  var a = document.getElementById("testSVG");
  // Get the SVG document inside the Object tag
  var svgDoc = a.contentDocument;
  // Get one of the SVG items by ID;
  var svgItem = svgDoc.getElementById("path3380");
  // Set the colour to something else
  //svgItem.setAttribute("stroke", "red");
  svgItem.style.stroke = "#ff0000";
  };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>JQuery:  </p>
  
  <pre><code>&lt;object id="testSVG" data="image_library/grandstaff_drawing_only.svg"    
  type="image/svg+xml" height=100% width=100%"&gt;
  &lt;img src="image_library/alto-clef.png" /&gt;
  &lt;/object&gt;
  
  
  &lt;script&gt;
  
  window.onload=function() {
  var svgDoc = $(“#testSVG”)[0].contentDocument; 
  $(“#path3380”, svgDoc).css(“stroke”, “red”); 
  
  };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you!!!</p>