javascript - 这两个 DOM 有什么区别？

Question

我有一些 friend 写的代码(见下文)。

有两件事。

• 我使用 DOMparser 创建一个 DOM浏览器的方法。我有一个示例 SVG 字符串来创建我的 DOM。创建的新 DOM 是 svgDOMfromString

• 还有另一个 DOM，svgDOM

下面的函数应该从 SVGdom 中提取路径及其矩阵。

我在函数顶部有一个示例 SVG 字符串 - 这是我想要解析的内容，而不是 SVGDom。

问题是我尝试解析的 2 个 DOM 具有不同的格式，因此如果我尝试解析 svgDOMfromString 我会收到错误。

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;
}

Answer 1

svgDOM 是一个 jQuery 对象。尝试改为记录 svgDOM[0]。

如果你想让 svgDOM 成为 jQuery 对象，请执行以下操作:$(svgDOMfromString)