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（小提琴对我不起作用）

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

如何在Raphael SVG中定位一套？

1 个答案: