javascript - 当我将 JavaScript 元素添加到我的 SVG 文件时，它消失了

Question

我正在使用 snapsvg 来操作使用 Inkscape 创建的 SVG 文件。当我尝试从 snapsvg 添加一个矩形到我已经存在的 svg 时，我得到一个空白页。您可以看到我如何操作 svg 的示例。

我试图制作一个新的脚本部分，但它总是在我的 svg 上方或下方的矩形或元素之外。我希望它在我的 svg 中。

//Run script right away

window.onload = function () {
var s = Snap("#iconDiv");

//Load SVG file

Snap.load("lager2.svg", function(f) {

//Load Rectangles and elements

Element1 = f.select("#Element1");
Group1 = f.select("#Group1");


//manipulate my rectangle
 Group1.hover(function() {
    Element1.attr({
     fill: "red"
    });
 });
});
}

我收到的唯一错误消息是:

未捕获的类型错误:s.circle 不是一个函数 在 window.onload

Answer 1

元素 #iconDiv 是不是顾名思义的 div？

getting started Snap.svg 的文档说

First lets create our drawing surface out of existing SVG element

因此您需要相应地更改您的代码行:

var s = Snap("#iconDiv"); // Target a <div> won't work

到

var s = Snap("#iconSvg"); // Target the <svg> element instead