美文网首页
获取 svg 经过 d3 变换 [transform(缩放、旋转

获取 svg 经过 d3 变换 [transform(缩放、旋转

作者: 不要面包要蛋糕 | 来源:发表于2022-08-16 19:54 被阅读0次

主要代码

/** transform matrix start */
// rect: svg 图形元素;self.g: 当前进行 transform 的元素,即 需要计算 transform 后坐标的点所在的进行 transform 的容器
// getPointAtLength: SVG路径对象.getPointAtLength(len), 该方法返回路径上指定距离的点的坐标,此处为 rect 左上角的点的坐标
const localPoint = rect.node().getPointAtLength(0)
const localTransformList = self.g.node().transform.baseVal
let localMatrix = self.g.node().viewportElement.createSVGMatrix()
// is there at least one entry?
if (localTransformList.length) {
   // consolidate multiple entries into one
   localMatrix = localTransformList.consolidate().matrix
}
const transformedPoint = localPoint.matrixTransform(localMatrix)

/** transform matrix end */

相关文章

网友评论

      本文标题:获取 svg 经过 d3 变换 [transform(缩放、旋转

      本文链接:https://www.haomeiwen.com/subject/nfrcgrtx.html