Javascript 这两个DOM'；s

我有一些朋友写的代码（见下文）

有两件事

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

  svgDOMfromString

• 还有另一个已经存在的DOM，

  svgDOM

下面的函数用于从SVGdom中提取路径及其矩阵

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

SVGDom。

问题是我试图解析的2个DOM的格式不同，因此如果我试图解析

svgDOMfromString

我会得到一个错误

函数parseAllPaths和GetMatrix（svgDOM）
{
var svgsvg=‘背景层1’；
var parser=新的DOMParser（）；
svgDOMfromString=parser.parseFromString（svgsvg，“image/svg+xml”）；]
var路径=[]；
//创建svgDOM的克隆
svgDOM=$（svgDOM.clone（）；
css（“可见性”、“隐藏”）；
$（“正文”）。追加（svgDOM）；
svgDOM=svgDOM[0]；
//删除第一组：没有可渲染元素
$（svgDOM）.find（'g'）.first（）.remove（）；
//将所有元素转换为路径，因为我们无法在进一步处理中处理其他元素
$（svgDOM）。查找（'椭圆、圆、线、多段线、多边形、矩形'）。每个（函数（）
{
svgCanvas.convertToPathCustom（$（this）[0]）；
});
//提取路径属性（包括基本颜色属性）
//并得到用于展平变换的每条路径的关系矩阵
$（svgDOM）.find（'path'）.each（函数（）
{
var路径={}；
var pathDOM=$（this）[0]；//DOM路径
变量节点=[]，
值=[]；
for（var attr，i=0，attrs=pathDOM.attributes，l=attrs.length；iMC
//arr=Raphael._pathToAbsolute（arr）；//mahvstcsqz->大写
//var d=Array.prototype.concat.apply（[]，arr.join（“”）；
//路径[“arr”]=arr；
路径[“d”]=路径d；
//获取转换路径坐标的关系矩阵
//到SVGroot坐标空间
var m=pathDOM.getTransformToElement（svgDOM）；
路径[“矩阵”]={
a:文学硕士，
b:m.b，
c:m.c，
医生：医学博士，
e:m.e，
f:m.f
};
路径。推送（路径）；
console.log（路径[0]）；
});
$（svgDOM.remove（）；
//日志（“路径：”，路径）；
返回路径；
}

svgDOM

是一个jQuery对象。请改为尝试记录

svgDOM[0]

---

如果要使svgDOM成为jQuery对象，请执行：

$（svgDOMfromString）

我希望从字符串创建的DOM与svgDOM相同，而不是相反。您的问题不清楚，因为您误解了DomeElement和jQuery对象之间的区别。DOMParser返回一个domeElement和

$（svgDOM）。clone（）

返回一个jQuery对象。jQuery对象包装doElement集合，以提供对集合进行操作的各种方法。

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