在d3和svg中旋转后使用path.getPointAtLength获取点坐标

Question

我想在旋转路径后获取一些点。

我使用下面的代码来旋转路径。

let path= svg.append("path")
.attr("class","offset control")
.attr("d", lineFunction(offsetLineData))

.style("stroke-width", 0.5)
.style("stroke", "red")
.style("fill", "none")
.attr("transform","rotate(90,"+p.x+","+p.y+")")
.attr('transform-origin',"center")

然后我想获取路径的起点和终点。

path.node().getPointAtLength(0)

但它返回的是未经旋转的坐标，我该如何获得旋转后的点的x和y值？

- Hossein Rastegar

Answer 1

将SVG视为嵌套坐标系的树形结构。每个元素都有自己的坐标，并根据重新计算规则与其父级适配。这些规则可以是显式的transform属性，也可以是width、height和viewBox的隐式组合（“将盒子A适配到大小B中”）。 transform属性被认为是与父元素的链接。这意味着，如果您要求元素的几何属性，大多数情况下您会得到应用变换之前的值。在应用变换后请求将得到父级坐标系中的几何值。

由于这种复杂性，有几个SVG API函数可用于查找这些坐标系如何配合。 getPointAtLength()将为您提供应用transform属性之前的坐标。

var localPoint = path.node().getPointAtLength(0)

首先，你需要找出transform属性的含义。这看起来有些复杂，部分原因在于该属性可以被动画化并且可以包含一系列函数，部分原因在于API本身就比较...

// construct a neutral matrix
var localMatrix = path.node().viewportElement.createSVGMatrix()
var localTransformList = path.node().transform.baseVal
 // is there at least one entry?
if (localTransformList.length) {
    // consolidate multiple entries into one
    localMatrix = localTransformList.consolidate().matrix
}

您可以将找到的变换应用于点上：

var transformedPoint = localPoint.matrixTransform(localMatrix)

有几个函数可以返回一个 SVGMatrix 以转换在应用 transform 属性（即上面的步骤之后）之后坐标系统中的数据：

• 要求转换到最近的视口（大多数情况下是最近的父级 <svg> 元素）： element.getCTM()

• 要求转换到屏幕像素： element.getScreenCTM()

• 要求转换到任意元素： element.getTransformToElement(...)

- ccprog