Javascript 无法将带有SnapSVG的元素添加到我的页面_Javascript_Html_Css_Snap.svg_Inkscape

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

javascript html css

Javascript 无法将带有SnapSVG的元素添加到我的页面,javascript,html,css,snap.svg,inkscape,Javascript,Html,Css,Snap.svg,Inkscape,因此，我使用SnapSVG来操纵我用Inkscape创建的SVG文件的动画。不同元素（如矩形或圆形）的动画效果非常好。我遇到的问题是，当我尝试使用SnapSVG代码添加一个新元素（如矩形）时，它不起作用，整个屏幕都是空白，所有内容都消失了。为什么我会有这个问题？甚至可以将带有SnapSVG的新元素添加到现有SVG文件中吗下面我向您展示了一些关于如何操作SVG以及如何在页面上的DIV中显示SVG的代码。我还向您展示了我如何尝试使用SnapSVG添加新元素我几乎什么都试过了。我可以将新元素的代码

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

下面我向您展示了一些关于如何操作SVG以及如何在页面上的DIV中显示SVG的代码。我还向您展示了我如何尝试使用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文件中。我得到的是一个空白页。

如果没有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中还没有位置，所以像“hover”等方法在您将append添加到DOM中之前是不可用的。一旦附加了这些方法，这些方法就变得可用。有一些方法可以使用，比如select，在它被附加之前，这样你就可以从片段中选择一个元素，然后附加它，而不是附加我认为的所有内容

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

我认为您不理解我的问题。像“悬停”这样的东西工作得很好！！！！我只想添加一个新的元素，比如一个矩形，比如这个圆var bigcirle=s.circle150150100；如果你想解决这个问题，首先你必须使用正确的代码。仅仅因为某些东西在第一时间起作用，并不意味着它是正确的，不会引起其他问题。你能不能先修改一下我的全部代码，这样我们就不会有任何误解，所以现在动画仍然在工作，即使我把s.appendf；在snap.load下面，这样很好。现在，我不明白您希望我如何处理var s=SnapiconDivI，我想我们需要在文件中以某种方式查看html和svg。基本上，iconDiv的问题是Snap不能与Div一起工作。因此，要么它只是标签错误，实际上是一个svg而不是Div，要么发生了其他事情。这可能是一个误会，但有必要澄清什么是iconDiv。这可能不是真正的问题，但首先应该消除任何使问题变得模糊的问题。看看是否可以包含html/svg。您可以执行类似s.select'someSvgOrGroupElement.appends.rect10,10,10,10或类似的操作。