我无法弄清楚如何相对于其兄弟路径的边界框放置路径。想象一个像窗口一样的盒子，我想在它的右上角放置一个关闭按钮。这是转换窗口(将其缩放 3 倍)后组合在一起的框和关闭按钮:
<g id="group24">
<path id="path24" fill="#00aa00" stroke="#00ff00" stroke-width="4" stroke-miterlimit="10" d="M301,585.08v47h45.834l-0.134-21.8
l12.3-0.2l-1-239H253v216c0,0,22,0.2,22,0c0-41,26-31.357,26-31.357V585.08L301,585.08z" transform="matrix(3,0,0,3,-612,-1003.16)"></path>
<path id="close-button" fill="#B40000" d="M256,232c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24
S269.255,232,256,232z M265.102,270.277l-8.985-8.984l-8.985,8.985l-4.826-4.829l8.983-8.984l-8.984-8.984l4.829-4.826l8.983,8.982
l8.981-8.983l4.83,4.827l-8.983,8.983l8.984,8.983L265.102,270.277z"></path>
</g>
我只是在将框(动画回调)动态转换为 group24 组后附加按钮，关闭按钮如下所示:
然后当我在组中获得 path24 元素的边界框并尝试将关闭按钮定位到右上角时:
var p = this.SvgButton.select("path");
var bbox = myBox.getBBox();
var coordString = (bbox.x2 - 10) + " " + (bbox.y);
p.transform("T" + coordString);
坐标总是错误的。如何将关闭按钮放置在浅绿色框的右上角？
我想要实现的一个例子在这里:http://jsfiddle.net/savpm8w3/1/
请注意，缩放动画在 jsfiddle 中不起作用，这就是为什么 fiddle 中的示例起作用的原因。
最佳答案
我通过向 Snap.Svg 添加一个插件来解决这个问题，该插件相对于其他 Snap 对象的边界框定位元素。可以进一步工作以提供更多转换类型。如果有人感兴趣，这里是代码:
Snap.plugin( function( Snap, Element, Paper, global ) {
Element.prototype.getCenter = function() {
var bbox = this.getBBox();
return {x: bbox.cx, y:bbox.cy};
};
Element.prototype.getSize = function() {
var bbox = this.getBBox();
return {w: bbox.width, h:bbox.height};
};
Element.prototype.getPos = function() {
var bbox = this.getBBox();
return {x: bbox.x, y:bbox.y};
};
Element.prototype.getTransformRelative = function(relativeObj, type, absolute, xadjust, yadjust) {
var movex = 0;
var movey = 0;
switch (type) {
case "center":
var c = relativeObj.getCenter();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
case "topleft":
var movepos = relativeObj.getPos();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
break;
case "bottomleft":
var movepos = relativeObj.getBBox();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
break;
case "topright":
var movepos = relativeObj.getPos();
var rsize = relativeObj.getSize();
var elsize = this.getSize();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
movex += rsize.w - elsize.w;
break;
case "bottomright":
var movepos = relativeObj.getBBox();
var rsize = relativeObj.getSize();
var elsize = this.getSize();
var elpos = this.getPos();
movex = (elpos.x > movepos.x2 ? 0 - (elpos.x - movepos.x2) : movepos.x2 - elpos.x);
movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
break;
case "topcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getPos();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > rpos.y ? 0 - (elpos.y - rpos.y) : rpos.y - elpos.y);
break;
case "bottomcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getBBox();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > rpos.y2 ? 0 - (elpos.y - rpos.y2) : rpos.y2 - elpos.y);
break;
case "leftcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getPos();
var elpos = this.getPos();
var elsize = this.getSize();
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > rpos.x ? 0 - (elpos.x - rpos.x) : rpos.x - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
case "rightcenter":
var c = relativeObj.getCenter();
var rbox = relativeObj.getBBox();
var elpos = this.getPos();
var elsize = this.getSize();
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > rbox.x2 ? 0 - (elpos.x - rbox.x2) : rbox.x2 - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
default:
console.log("ERROR: Unknown transform type in getTransformRelative!");
break;
}
if (typeof(xadjust) === 'undefined') xadjust = 0;
if (typeof(yadjust) === 'undefined') yadjust = 0;
movex = movex + xadjust;
movey = movey + yadjust;
return (absolute ? "T"+movex+","+movey : "t"+movex+","+movey);
};
});
关于coordinates - 捕捉 Svg 边界框和变换坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25906388/