0

这是我想做的：

var a = Snap("#id");

var group = new SnapGroup(); // unfortunatly didnt find how to do it
// for some reasons i dont want to do a.group();
group.circle(5,5,5);
a.add(group);

这是我所做的：

var a = Snap("#id");

s = Snap(); // creates a SVG element instead of a group
s.circle(5,5,5);

a.add(s);

它起作用了，渲染了圆圈，但是我无法移动该组：

s.attr({"x":60}); // the group doesnt move

<svg>实际上，当我们将和元素嵌入到另一个中时，它看起来像这样。然后就不可能在父元素中移动嵌入的 svg 元素。

我想知道如何在不做的情况下创建组元素snapInstance.group()？然后将其添加到 Snap 实例。

4

1 回答 1

2

从你的描述中我仍然不太确定你在追求什么，因为我怀疑它可能取决于你如何生成原始组（如果它只是一点 svg 标记或导入）。

 Snap.parse('<g></g>'); may be enough to fiddle with, to parse into a fragment.

看看这是否有帮助……这是一个包含两个独立 SVG 元素和 Snap 实例的示例。它将从原始 SVG 标记字符串中绘制一个带有组的矩形，从 Snap 添加一个圆圈，在第二个实例中，它也会将该组平移 75。

<svg id="svg1" width="200" height="200"></svg><br />
<svg id="svg2" width="200" height="200"></svg>

...
    var paper1 = Snap("#svg1");
    var paper2 = Snap("#svg2");
    var groupMarkup = '<g><rect x="0" y="0" width="70" height="70" opacity="0.3"/><text x="0" y="15">original</text></g>'; 

    var parsedMarkup1 = Snap.parse( groupMarkup ); //parse from a string derived elsewhere
    var parsedMarkup2 = Snap.parse( groupMarkup );


    // example1  just use the markup with its original group

    paper1.add( parsedMarkup1 )
          .add( paper1.circle(100,50,50)
                      .attr('fill', 'red' ) );


    // example2, will create a new group and add the existing group to it, and then move it

    var outerG = paper2.g()
                       .transform('t75,0');    //create a group and move it
    outerG.add( parsedMarkup2 );               //add the original group/square
    outerG.add( paper2.circle(70,50,50)        //add a circle
                      .attr('fill', 'blue' ) );

   var clone = outerG.clone();                  //lets create a clone
    clone.transform('r45t50,50');               //translate and rotate the clone

在这里摆弄http://jsfiddle.net/v4bJa/

于 2013-12-09T20:18:53.570 回答