title: What is the difference between these 2 DOM's?
body: <p>I have some code written from a friend(see below).</p>
  
  <p>There are 2 things.</p>
  
  <ul>
  <li><p>I create a DOM using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser" rel="nofollow noreferrer">DOMparser</a> method of the browser. I have a sample SVG string to create my DOM from. The new DOM created is <code>svgDOMfromString</code></p></li>
  <li><p>There is also another DOM that is already there, <code>svgDOM</code></p></li>
  </ul>
  
  <p>The function below is supposed to extract paths and their matrices out of an SVGdom.</p>
  
  <p>I have a sample SVG string at the top of the function - This is what I would like to parse, not the <code>SVGDom.</code> </p>
  
  <p>The problem is that the 2 DOM's I am trying to parse have a different format, therefore if I try to parse the <code>svgDOMfromString</code> I get an error.</p>
  
  <p><img src="https://i.stack.imgur.com/j8AkJ.png" alt="enter image description here"> </p>
  
  <pre><code>function parseAllPathsAndGetMatrixes(svgDOM)
  {
  
  
    var svgsvg = '&lt;svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"&gt;&lt;!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --&gt;&lt;g&gt;&lt;title&gt;background&lt;/title&gt;&lt;rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/&gt; &lt;g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"&gt;&lt;rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;title&gt;Layer 1&lt;/title&gt;&lt;ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/&gt;&lt;/g&gt;&lt;/svg&gt;';
    var parser = new DOMParser();
    svgDOMfromString = parser.parseFromString(svgsvg, "image/svg+xml");]
  
    var paths = [];
    // Create a clone of svgDOM
    svgDOM = $(svgDOM).clone();
    svgDOM.css("visibility", "hidden");
    $("body").append(svgDOM);
    svgDOM = svgDOM[0];
  
    // Remove first group: there are no renderable elements
    $(svgDOM).find('g').first().remove();
  
    // Convert all elements to paths, because we cannot deal with other elements in further processings
    $(svgDOM).find('ellipse,circle,line,polyline,polygon,rect').each(function ()
    {
      svgCanvas.convertToPathCustom($(this)[0]);
    });
    // Extract attributes of paths (including essential color attrs)
    // and get the relation matrix of each path which is used for flattening transforms
    $(svgDOM).find('path').each(function ()
    {
      var path = {};
      var pathDOM = $(this)[0]; // DOM path
  
      var nodes = [],
        values = [];
      for (var attr, i = 0, attrs = pathDOM.attributes, l = attrs.length; i &lt; l; i++)
      {
        attr = attrs.item(i)
        path[attr.nodeName] = attr.nodeValue;
      }
      //var arr = Raphael.path2curve(path.d); // mahvstcsqz -&gt; MC
      //arr = Raphael._pathToAbsolute(arr); // mahvstcsqz -&gt; uppercase
      //var d = Array.prototype.concat.apply([], arr).join(" ");
      //path["arr"] = arr;
      path["d"] = path.d;
      // Get the relation matrix that converts path coordinates
      // to SVGroot's coordinate space
      var m = pathDOM.getTransformToElement(svgDOM);
      path["matrix"] = {
        a: m.a,
        b: m.b,
        c: m.c,
        d: m.d,
        e: m.e,
        f: m.f
      };
  
      paths.push(path);
      console.log(paths[0]);
    });
    $(svgDOM).remove();
  //console.log("PATHS:",paths);
  
    return paths;
  }
  </code></pre>