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

实际上，当我们将<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/

创建一个不依赖Snap实例的组

1 个答案: