美文网首页
获取 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