javascript - Snap.svg 没有设置圆的新位置坐标。 (举例)

Question

示例:http://codepen.io/heroheman/pen/thdBH

嗨，我有这个盒装路径，它每秒都会改变它的 Angular 点。我还有 4 个图标，它们应该位于盒子的 Angular 上。两者都基于重新计算点并设置新位置的数组。但圆圈的位置似乎有某种缩放 - 我尝试了绝对路径和相对路径(t 和 T 似乎没有区别)。

也许你们中的一个人可以帮忙!

Answer 1

您需要考虑圆心的偏移...

例如，如果查看“bubble”，它的 cx,rx 属性为 113,101.6

因此，理想情况下，气泡的变换在逻辑上应该是(新变换 - 原始位置)

't' + ( boxCoords[4] - 113 )  + ',' + (boxCoords[5] - 101.6 )

您可以将其硬编码到数组或对象中。或者，如果有很多图标，您可能可以抓取图标各自的圆形元素，并获取其 element.attr('cx') 值(如果是矩形，则获取 x ，如果是任意形状，则获取先前的变换，或者执行getBBox() 来获取它的中心)。