Question

我有一点问题，我试图解决我有一个这样的设置：它不是整个代码，但我想告诉你我何时何地调用我的功能。
Index.html

...doctype, header etc.
<body>
<svg id="viewer" width="1200" height="1200"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="js/viewer.js"></script>
</body>

viewer.js

var s=Snap("#viewer");
function createSec(i) {
var sec = s.group();
var file= "../images/background.svg";
var bg = Snap.load(file, function (loadedFragment) {
    sec.clear();
    sec.append(loadedFragment);

    var block = s.rect(x, curY, width, height);

    block.attr({
        id: "rec"+i+"-"+j,
        fill: "red",
        stroke: "#1f2c39",
        strokeWidth: 1
    });
    var text = s.text((x + 2.5), (curY + 10), "Text"+i+"."+j);
    text.attr({
        id: "tex"+i+"-"+j,
        'font-size':10
    });
    sec.append(block);
    sec.append(text);
    curY += stepY;

});
}  
function getSection(id) {
    console.log("Cursec: "+document.getElementById("rec1-1"));
    console.log("Cursec2: "+s.select("#rec1-1"));
}  
function init() {
    for(i = 1; i <= 18; i++) {
        createSec(i);
    }
    window.setTimeout(getSection(2),5000);
}  
init();

现在我的问题。
代码运行良好，我加载一个背景，并在背景的顶部添加一些带有一些文本的矩形。我可以检查DOM（使用firefox和chrome），看起来我想要它。如果我在firefox控制台中键入document.getElementById("rec1-1")，我会得到我想要的东西，例如：<rect x="532.32309375" y="197.358875" width="132.3538125" height="117.69547500000002" id="rec1-1">
但是我的getSection()函数总是在控制台上回显Cursec:null & Cursec2:null 我究竟做错了什么？我可以从浏览器控制台访问DOM，但不能在Snap SVG中访问。

Snap SVG，无法访问DOM内部的元素

0 个答案: