如何使用 snap.svg 从转换组中其他元素的中心绘制 svg 线？

Question

我三个形状都在同一组。这个群体已经转变。我想从该组中的一个元素画一条线。我正在尝试通过以下方式访问此元素坐标：

s.select("#hitboxHeel").getBBox().cx and s.select("#hitboxHeel").getBBox().cy

然而，这给出了一些奇怪的坐标，与它们应该在的位置相去甚远。我如何获得点的实际位置，从而能够画一条线？

Answer 1

我遇到了类似的问题，并从 post 中找到了解决方案：Rectangle coordinates after transform

在这里，您基本上想要将形状的 'aggregated' 变换矩阵应用于未变换的坐标（抱歉措辞不当）。该矩阵还包含父元素（此处为组节点）的转换，因此您不必担心它们。所以，给定：

你的native svg元素node
你的 native svg 容器 svg
您的原始兴趣点坐标（变换前）x 和您想要变换的 y
原点的预期变换坐标 transformedPoint

`

// get the component transform matrix
var ctm = node.getCTM();
var svgPoint = svg.createSVGPoint(); 
svgPoint.x = x;
svgPoint.y = y;
// apply the matrix to the point
var transformedPoint = svgPoint.matrixTransform(ctm); 



// an example using d3.js ( svg > g > rect )
// get the center of the rectangle after tansformations occured
var svg = d3.select('body').append('svg')
    .attr('width', 500)
    .attr('height', 500)
    .attr('id', 'myCanvas')
    .style('margin', 100)
var g = svg.append('g')
    .attr('transform', 'translate(-10,10)')
var r = g.append('rect')
    .attr('x', 300).attr('y', 100).attr('width', 79).attr('height', 150)
    .attr('transform', 'translate(-54,300)rotate(-30,30,20)')
    .attr('stroke', 'black')
    .attr('fill', 'red')
var pt = svg.node().createSVGPoint()
pt.x = parseInt(r.attr('x')) + parseInt(r.attr('width')) / 2
pt.y = parseInt(r.attr('y')) + parseInt(r.attr('height')) / 2
var ctm = r.node().getCTM()
var center = pt.matrixTransform(ctm)
console.log('the transformed rectangle center', center)

// draw the center to confirm the accuracy of the process    
svg.append('circle') 
    .attr('cx', center.x).attr('cy', center.y).attr('r', 5)
    .attr('stroke', 'black')
    .attr('fill', 'blue')

`

如何使用 snap.svg 从转换组中其他元素的中心绘制 svg 线？

How to draw a svg line from center of other element in transformed group with snap.svg?

javascript

svg

matrix

snap.svg