javascript - 如何在 Raphael SVG 中定位一个集合？

Question

我正在尝试在 raphael 中定位一组元素，包括文本、路径和圆圈。有没有办法将整个集合定位在 svg 中？ SVG 本身覆盖了窗口的整个高度和宽度，集合需要位于 SVG 的中心。 代码如下:

var r = Raphael("holder", windowWidth, windowHeight);

    var set = r.set(
    (r.text(100,250,"ab").attr({...})),
    (r.text(295,250,"c").attr({..})),
    (r.path("M400,217L400,317").attr({...})),
    (r.circle(190, 290, 13).attr({...})));

    for (var i=0; i<set.length; i++) {
      set[i].node.setAttribute("class", "set");
    }

我已经添加了类以防可以使用 css 操作集合，但我还没有找到任何方法来这样做。 关于如何解决这个问题的任何想法？

Answer 1

您可以对集合进行变换，例如 http://jsbin.com/EzUFiD/1/edit?html,js,output ( fiddle 不适合我)

var svgWidth = 600; 
var svgHeight = 600;
var r = Raphael("holder", svgWidth, svgHeight);


var set = r.set(
  (r.text(50,50,"ab")),
  (r.text(50,60,"c")),
  (r.path("M100,17L40,31")),
  (r.circle(80, 80, 13))
);

var bbox = set.getBBox();  //find surrounding rect of the set

var posx = svgWidth / 2 - bbox.width / 2 - bbox.x;  // find new pos depending on where it is initially
var posy = svgHeight / 2 - bbox.height / 2 - bbox.y;


set.transform('t' + posx + ',' + posy);