CODEWITHSUNDEEP
javascriptdom
nicholaswmin
nicholaswmin

Reputation: 23009

What is the difference between these 2 DOM's?

I have some code written from a friend(see below).

There are 2 things.

The function below is supposed to extract paths and their matrices out of an SVGdom.

I have a sample SVG string at the top of the function - This is what I would like to parse, not the SVGDom.

The problem is that the 2 DOM's I am trying to parse have a different format, therefore if I try to parse the svgDOMfromString I get an error.

enter image description here 

function parseAllPathsAndGetMatrixes(svgDOM)
{


  var svgsvg = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/></g></svg>';
  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 < l; i++)
    {
      attr = attrs.item(i)
      path[attr.nodeName] = attr.nodeValue;
    }
    //var arr = Raphael.path2curve(path.d); // mahvstcsqz -> MC
    //arr = Raphael._pathToAbsolute(arr); // mahvstcsqz -> 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;
}

Upvotes: 0

Views: 81

Answers (1)

Ross
Ross

Reputation: 14435

svgDOM is a jQuery object. Try logging svgDOM[0] instead.

If you want to make svgDOM a jQuery object do: $(svgDOMfromString)

Upvotes: 2

Related Questions