get point coordination using path.getPointAtLength after rotation in d3 and svg

user_10038067 0
Viewed 1866

i want get some points from path after rotating it

i use below code to rotate path

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")

then i want get end point and start point of path

path.node().getPointAtLength(0)

but it return coordination where it don't rotated how can i get x and y of point after rotation

d3.js svg
1 Answers

Think of a SVG as a tree of nested coordinate systems. Every element has its own coordinates, and is fitted into its parent with a rule how to re-calculate them. These rules can be explicit transform attributes, but also implicit combinations of width, height and viewBox ("fit box A in size B").

A transform attribute is considered to be the link to the parent element. That means, if you ask for a geometric property of an element, most of the times you get the value before the transform is applied. After it is applied would be asking for geometric values in the coordinate system of the parent.

Because of this complexity there are several SVG API functions to find out how these coordinate systems fit together. getPointAtLength() gets you coordinates before applying the transform attribute.

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

First, you have to find out what the transform attribute does. This looks a bit complicated, partly because the attribute can be animated and can contain a list of functions, partly because the API is...well...:

// 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
}

You can then apply the found transformation to the point with

var transformedPoint = localPoint.matrixTransform(localMatrix)

There are several functions hat will return a SVGMatrix to transform data from the coordinate system after application of the transform attribute (i. e. after the step above):

  • to ask for the transformation to the nearest viewport (in most cases the nearest parent <svg>) element: element.getCTM()

  • to ask for the transformation to screen pixels: element.getScreenCTM()

  • to ask for the transformation to an arbitrary element: element.getTransformToElement(...)

user_49967790
Related