Snap Svg Ограничительная коробка и координаты преобразования

Question

Я не могу понять, как поместить путь относительно ограничивающей рамки его родственного пути. Представьте себе окно, подобное окну, и я хочу поместить его в верхний правый угол. Вот кнопка коробки и близко сгруппирован вместе после преобразования окна (масштабирование 3x):

<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 и вот почему пример в скрипку работ.

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); 
    }; 
});