无法将带有 SnapSVG 的元素添加到我的页面

Question

所以我正在使用 SnapSVG 来操作（动画化）我用 Inkscape 创建的 SVG 文件。不同元素（如矩形或圆形）的动画效果非常好。我遇到的问题是，当我尝试使用 SnapSVG 代码添加一个新元素（如矩形）时，它不起作用，并且整个屏幕都是空白的（一切都消失了）。为什么我有这个问题？甚至可以使用 SnapSVG 将新元素添加到现有 SVG 文件中吗？

下面我向您展示了一些代码，说明我如何操作 SVG 以及它如何在我的页面上的 DIV 中显示。我还向您展示了我如何尝试使用 SnapSVG

添加新元素

我几乎尝试了所有方法。我可以将新元素的代码放在现有 SVG 的代码之外，但它总是出现在 SVG 文件之外。

  <head>
        <meta charset="utf-8">
        <title>Inkscape Animated Icon Snap</title>
<!--We need to add the Snap.svg script to our document-->
        <script src="snap.svg.js"></script>
        <script>
//Run script right away
            window.onload = function () {
//We'll be appending the icon to this DIV later
                var s = Snap("#svgDiv");
//Have Snap load the SVG file
                Snap.load("icon.svg", function(f) {
                    s.append(f);
//Assign the white rectangle
                    whiteRect = f.select("#whiteRect");

//Assign the whole icon group
                    icon = f.select("#icon");

                    //When the icon is hovered over, have the white rectangle move up slightly with elastic properties
                    icon.hover(function() {

                        whiteRect.animate({y:18}, 500, mina.elastic);
                    },
//And return to original position when not hovered over
                               function() {
                        whiteRect.animate({y:23.984177}, 500, mina.elastic);
                    }
                    );

                    var bigCircle = s.circle(0, 0, 20).attr({fill: 'green' });
            icon.append(bigCircle);
//Finally append the icon to iconDiv in the body

                });          
            };
        </script>
    </head>
    <body>
<!--Here's the DIV that will hold the animated SVG icon-->
<svg id="svgDiv"></svg>     
    </body>

所以基本上我想要的只是添加到我的 SVG 文件中的另一个矩形。我得到的是空白页。

Answer 1

2 件主要事情 spring 需要注意（如果没有 html/svg 也很难确定）。

首先，必须在 SVG 元素上调用 Snap，而不是 HTML 元素，所以当我看到这一行时...

var s = Snap("#iconDiv");

这几乎可以肯定是错误的。它不能是 div 或任何 HTML 元素。 Snap 适用于 SVG 元素，

var s = Snap("#anSVGselement");

是需要的。

其次，你的台词

s.append(f);

想直后Snap.load()

Snap.load("icon.svg", function(f) {
    // stuff here probably won't work, there are some minimal methods like select, but not like hover etc
    s.append(f);
    //do stuff now it's appended
    var icon = s.select("#icon");
    var bigCircle = s.circle(10, 970, 20);
    icon.append(bigCircle);
});

问题是，此时 f 只是一个片段，它在 DOM 中还没有位置，因此 'hover' 等方法在您添加 with 之前不可用附加到 DOM。添加后，这些方法就可用了。有一些方法可用，例如 select，然后再追加（因此您 'may' 能够 select 片段中的一个元素，然后追加它，而不是追加我认为的所有内容）。

Example

另请注意，icon.svg 文件上有一些变换，因此您需要像我的示例一样调整圆圈以获得正确的 cx/cy，或者添加一个变换以匹配（或从原始 svg 中删除转换并具有正确的 cx/cy)

无法将带有 SnapSVG 的元素添加到我的页面

Can't add elements with SnapSVG to my Page

html

javascript

css

inkscape

snap.svg