如何展平转换后的 svg 路径答案

【问题标题】：How to flatten a transformed svg path如何展平转换后的 svg 路径
【发布时间】：2019-05-16 14:39:18
【问题描述】：

我正在尝试使用 Snap.Svg javascript 库从先前转换的路径在 svg 中创建一个新的路径字符串。新路径字符串在创建时必须包含旧的转换。问题是我不确定正确的方法到底是什么。我查看了这个线程Get the current matrix transformation of an SVG element，但是当我尝试将矩阵对象添加到 snap.svg 中的此方法时，我得到了未定义。如何从 DOM 节点获取转换矩阵对象，如本示例 Apply transformation to result of previous transformation on SVG path 所示。 snap库中的相关方法我认为是http://snapsvg.io/docs/#Snap.path.map

我的代码：

   var result = d3.select(".line").node();
   console.log(result.transform.baseVal.consolidate().matrix);

以上返回null。如何创建/获取正确的转换矩阵对象，以便可以使用 Snap.path.map 方法？

【问题讨论】：

【解决方案1】：

不确定您使用的是 d3 还是 Snap，所以答案可能取决于。如果是 Snap，您可以查看从

获取矩阵

element.transform().localMatrix or 
element.transform().globalMatrix

然后使用该矩阵使用

Snap.path.map( pathString, Matrix )

如果需要获取转换字符串，可以从

获取

somepath.attr('d')

【讨论】：