title: Drawing SVG into Canvas and manipulating drawn elements using their IDs
body: <p>I have an SVG file loaded into an <code>&lt;object&gt;</code> tag. I am using javascript to manipulate some elements within this svg. For example:</p>
  
  <pre><code>var theSvgXml = document.getElementById('theObject').contentDocument;
  theSvgXml.getElementById('theElementId').style.display = 'inline';
  theSvgXml.getElementById('theElementId').style.fill = 'red';
  theSvgXml.getElementById('anotherElement').style.display = 'none';
  </code></pre>
  
  <p>This works perfectly and all was well. But i am wondering if the same thing can be done with canvas. I have read about kinetic js, fabric js, canvg js as well, and i saw the various methods of loading the svg file into the canvas either by the file directory, the xml or through an image.</p>
  
  <p>But after drawing this svg file into the canvas, can i manipulate the elements by their IDs?</p>
  
  <p>The SVG is created using Adove Illustrator, and each layer or group is given an id with can be accessed using css selectors. Again, can this be done in canvas after drawing the SVG onto it. (Please note that the SVG is HUGE and the only reason i am thinking about the canvas solution is because of the svg not showing the illustrator multiply effect to create a shadow)</p>
  
  <p>Any help will be highly appreciated. Thank you.</p>
  
  <p>Code Snippet:</p>
  
  <pre><code>&lt;g id="Pockets"&gt;
  &lt;g id="Pen__x26__Radio_Arm_Pocket" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Pen_Pocket_Arm" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Card_Zipper_Arm_Pocket" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Radio_Pocket_Arm_Pocket" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Angled_Chest_Pocket_Right" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Angled_Chest_Pocket_Left" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Angled_Chest_Pocket_left_and_Right" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Chest_Pocket_Right" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Chest_Pocket_Left" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Chest_Pocket_left_and_Right" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Tool_Pocket" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_x2F_Mobile_Pocket_Velcro" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_x2F_Mobile_Pocket_Zip" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_x2F_Mobile_Pocket_Button" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_Pocket_Velcro" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_Pocket_Button" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Cargo_Pocket_Zip" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_Right_Velcro" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_Velcro" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_and_Right_Velcro" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_Right_Velcro_Button" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_Velcro_Button" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_and_Right_Button" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_Right_Zip" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_Zip" class="st791"&gt; … &lt;/g&gt;
  &lt;g id="Back_Pocket_left_and_Right_Zip" class="st791"&gt; … &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>As you can see form the xml snippet after exporting the file from adobe illustrator, each group is set with an ID. How can preserve these in canvas as objects (as Fabrics.js suggests using getObjects() method)? Is there a way to achieve this? If yes, how can i reference these groups? Also, the shadow is a key issue and i do not want ot use flash. Thanks</p>