创建不依赖于 Snap 实例的组

Question

这是我想做的：

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

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

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

Answer 1

从你的描述中我仍然不太确定你在追求什么，因为我怀疑这可能取决于你如何生成原始组（如果它只是一点 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/