Question

因此，我正在使用SnapSVG操纵（动画）我使用Inkscape创建的SVG文件。像矩形或圆形这样的不同元素的动画效果很好。我遇到的问题是，当我尝试使用SnapSVG代码尝试添加一个新元素（如矩形）时，它不起作用，整个屏幕为空白（所有内容消失了）。为什么会有这个问题？甚至可以通过SnapSVG向现有的SVG文件添加新元素吗？

下面，我向您展示了一些有关如何操作SVG以及如何在页面的DIV中显示它的代码。我还向您展示了我如何尝试使用SnapSVG添加新元素

我几乎尝试了所有事情。我可以将新Element的代码放在已经存在的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

浮现在脑海中的两件主要事情（即使没有html / svg，也很难确定）。

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

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中尚无位置，因此直到您将append添加到DOM中之后，“ hover”等方法才可用。附加后，这些方法将可用。在附加之前，有几种方法可以使用，例如select（这样，您“也许”可以从片段中选择一个元素，然后附加该元素，而不是附加我认为的所有内容）。

Example

还请注意，icon.svg文件具有一些变换，因此您需要像我的示例中那样调整圆以具有正确的cx / cy，或添加一个匹配的变换（或从原始svg并具有正确的cx / cy）

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

1 个答案: