在 SVG 组中动态添加 SVG 圆圈？答案

【问题标题】：Dynamically add SVG circle in a SVG group?在 SVG 组中动态添加 SVG 圆圈？
【发布时间】：2015-07-15 01:54:39
【问题描述】：

我正在使用 SnapSVG 库。我正在尝试将动态创建的 SVG 圆圈添加到 SVG 组中。每次单击链接时都会添加一个新圆圈（添加复合）。然后我尝试将新创建的圆圈推送到一个数组并将该数组传递给组（拖动）函数。我基本上想将所有的圆圈和矩形拖到一个组中。但它不起作用。这是我的代码...

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="snap.svg-min.js"></script>
  </head>

  <body>
    <svg id="svg"></svg>
    <div id="addComp">Add Composite</div>

    <script>
// JavaScript Document
(function() {
    var s = Snap("#svg");

    // Construct Composite
    function composite(y, i) {
        var CirArray = [];
        $("svg g").remove();
        $("svg rect").remove();
        $("svg circle").remove();
        var square = s.rect(30, 40, y, 40);
        console.log("Square:" + y);
        square.attr({
            fill: 'lightblue',
            stroke: 'lightblue',
            //strokeOpacity: .3,
            //strokeWidth: 10
        });
        CirArray.push(square);


        var k = 0;
        for (z = 1; z <= i; z++) {
            k = k + 45;
            console.log("Circle:" + k);

            var mycircle = s.circle(k, 120, 20);
            mycircle.attr({
                fill: 'coral',
                stroke: 'coral',
                strokeOpacity: .3,
                strokeWidth: 10
            });

            CirArray.push(mycircle);

        } // For loop end
        drag.apply(null, CirArray);

    } // Construct Composite End

    // Group
    function drag(CirArray) {
        var tableset = s.group(CirArray);
        for (p = 0; p < CirArray.length; p++) {
            console.log(CirArray[p])
        }
        console.log(CirArray.length)
            // Drag
        var move = function(dx, dy) {
            this.attr({
                transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
            });
        }
        var start = function() {
            this.data('origTransform', this.transform().local);
        }
        var stop = function() {
            console.log('finished dragging');
        }
        tableset.drag(move, start, stop);
    } //Drag End

    // Add Composite
    var x = 0;
    var clct = 0;
    $("#addComp").click(function() {
        x = x + 45;
        clct = clct + 1;
        composite(x, clct);
    }); // Add Composite End
}()); // Iffe End
</script>
  </body>
</html>

Visit this site and click on 'Add composite' link a couple of times to see it in action

非常感谢任何帮助....

谢谢

【问题讨论】：

标签： javascript jquery svg snap.svg

【解决方案1】：

基本上在 .group(CirArray) 上添加数组似乎不会将所有数组项添加到组中（检查 SVG 输出）组标记为空。

而是将它们添加到下面的 for 循环中。进行了以下更改，它似乎可以按预期工作并将所有正方形和圆形一起移动。

  var tableset = s.group();

  for (p = 0; p < CirArray.length; p++) {
        tableset.add(CirArray[p]);
        console.log(CirArray[p])
    }

在拖动函数中也简单地调用它 drag(cirArray) （正如@Paul-lebeau 所建议的那样。drag(CirArray);）。

Forked Plunker

【讨论】：

谢谢拉菲，我已经通过snapsvg.io/docs/#Paper.g 的帮助解决了这个问题。我的解决方案与您的建议非常相似。

【解决方案2】：

function.apply() 方法的第二个参数应该是一个参数数组。

但是你传入的是一个 Snap 元素数组。因此，在您的 drag() 函数中，CirArray 参数被设置为原始 CirArray 的第一个元素，而不是整个数组。

要么将调用改为

drag.apply(null, [CirArray]);

或者只是正常调用它

drag(CirArray);

【讨论】：

谢谢，这两个选项我都试过了。他们给了我这个错误....Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name. on console.log(CirArray.length)
这是一个您需要调试的不同问题。