如何将矩阵变换应用于整个 svg 的路径而不仅仅是一条路径？答案

【问题标题】：how to apply a matrix transform to entire svg's paths not just one path?如何将矩阵变换应用于整个 svg 的路径而不仅仅是一条路径？
【发布时间】：2014-08-24 03:25:01
【问题描述】：

任何人都知道为什么当我使用下面的代码将矩阵应用于 svg 的整个路径时，会出现一些问题，例如当 settimeout 函数完成时 svg 被剪切或跳转？：

  var matrix = g.transform().localMatrix;
  var mySet = g.selectAll('path');
  mySet.forEach( function( el ) {
  var newPathString = Snap.path.map( el, matrix ).toString();
  el.attr({ d: newPathString });
  } );

 var svg = g.select('svg');
 var newObj = svg.clone();
 s.g( newObj );
 g.remove();
 setTimeout(function(){alert(newObj.toString())},8000); 

 }, 7000 );
 } );

编辑：我想要实现的是获取 svg 的路径标记，并对其应用矩阵变换。

【问题讨论】：

标签： javascript svg raphael snap.svg

【解决方案1】：

尝试将所有 path 标签插入到 g 标签中，并对 g 标签应用转换。

【讨论】：

感谢 Vlas，我正在加载一个 svg 文件并尝试从该 svg 文件中获取所有路径。在这种情况下，您会建议如何从 svg 文件中获取实体路径？
使用 appendChild 重新定义路径。
罗伯特，其实我用的是这个：el.attr({ d: newPathString }).appendChild();但我猜它确实使代码从那里停止工作。我猜是因为“appendChild 是一种 DOM 方法（不是 Snap 方法）”。