编辑2016-10-07: 有关更一般的方法,请参见下面的附录。
根据变更日志,它已消失。
transform/decompose.js不过,中有一个函数,供内部使用进行计算。可悲的是,它没有暴露于外部使用。
也就是说,即使不使用任何D3,也很容易做到:
function getTranslation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseval.consolidate().matrix; // As per definition values e and f are the ones for the translation. return [matrix.e, matrix.f];}console.log(getTranslation("translate(20,30)")) // simple case: should return [20,30]console.log(getTranslation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"))这将
g使用标准DOM方法创建一个用于计算目的的虚拟元素,并将其
transform属性设置为包含转换的字符串。然后
.consolidate(),它调用
SVGTransformList接口以将可能很长的转换列表合并为一个
SVGTransform类型
SVG_TRANSFORM_MATRIX,该类型在其
matrix属性中包含所有转换的简化版本。这种
SVGMatrix每定义保存值,在其属性翻译
e和
f。
使用此功能,
getTranslation()您可以重写D3 v3语句
d3.transform(transformString).translate;
如
getTranslation(transformString);
附录
因为随着时间的推移,这个答案已经引起了人们的兴趣,所以我决定组合一个更通用的方法,该方法不仅可以返回转换,还可以返回转换字符串的所有转换定义的值。基本方法与我上面原始帖子中列出的方法相同,加上从中得到的计算
transform/decompose.js。该函数将返回一个具有所有转换定义属性的对象,就像前一个
d3.transform()一样。
function getTransformation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseval.consolidate().matrix; // Below calculations are taken and adapted from the private function // transform/decompose.js of D3's module d3-interpolate. var {a, b, c, d, e, f} = matrix; // ES6, if this doesn't work, use below assignment // var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5 var scaleX, scaleY, skewX; if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX; if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX; if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY; if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX; return { translateX: e, translateY: f, rotate: Math.atan2(b, a) * 180 / Math.PI, skewX: Math.atan(skewX) * 180 / Math.PI, scaleX: scaleX, scaleY: scaleY };}console.log(getTransformation("translate(20,30)"));console.log(getTransformation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"));


