捕捉 Svg 边界框和变换坐标

Question

我不知道如何相对于其兄弟路径的边界框放置路径。想象一个像窗口一样的盒子，我想在它的右上角放一个关闭按钮。这是转换窗口（缩放 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 中的示例起作用的原因。

Answer 1

我已经设法通过向 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);
    };
});