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

Answer 1

将SVG视为嵌套坐标系的树。每个元素都有其自己的坐标，并在其父级中配备了如何重新计算它们的规则。这些规则可以是显式的transform属性，也可以是width，height和viewBox的隐式组合（“大小为A的框A”）。

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)

应用了transform属性（即，在上述步骤之后）后，有几个函数会返回SVGMatrix来转换来自坐标系的数据：

要求转换到最近的视口（在大多数情况下是最近的父<svg>）元素：element.getCTM()
要求转换为屏幕像素：element.getScreenCTM()
要求转换为任意元素：element.getTransformToElement(...)

在d3和svg中旋转后使用path.getPointAtLength获得点协调

1 个答案: