Question

我在通过javascript操纵SVG时遇到了一些麻烦。我想通过点击一个按钮来增加一条线的长度。我在head标签中包含了这段代码：

<script type="text/javascript">
x=135;
y=135;
var container = document.getElementById("svgbox");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


function svg() {
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

function line() {
x=x-10;
y=y-10;
var L1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
    L1.setAttribute("x1", "100"); L1.setAttribute("y1", "100");
    L1.setAttribute("x2", x); L1.setAttribute("y2", y);
    L1.setAttribute("stroke", "#05adc7");
    L1.setAttribute("stroke-width", "2px");
    mySvg.appendChild(L1);
}
</script>

这是正文：

<body onload="svg()">
<form>
<input type="button" onClick="line()" />
</form>
<div id="svgbox">
</div>
</body>

但是当我点击按钮时，我收到一个错误，告诉我变量“container”为空。有谁知道问题是什么？

Answer 1

如果你将行var container = document.getElementById("svgbox");放在svg函数中，它就可以工作。

function svg() {
var container = document.getElementById("svgbox");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

代码中null容器的原因是因为在执行第var container = document.getElementById("svgbox");行时尚未加载DOM。

您需要在DOMContentLoaded事件或window.onload事件被触发后声明容器。

Answer 2

对于SVG和HTML，这是DOM脚本中的常见问题。问题是当JavaScript执行时尚未加载svgbox元素。最简单的解决方案是简单地移动脚本标记，使其成为文档中的最后一个元素。但是，这有点难看，因此大多数JavaScript库都包含一个方法，该方法接受在文档加载后执行的回调。例如，如果您使用的是jQuery，那么您的脚本标记将如下所示：

<script type="text/javascript">
$(document).ready(function(){
    x=135;
    y=135;
    var container = document.getElementById("svgbox");
    var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


    svg = function() {
    mySvg.setAttribute("version", "1.2");
    mySvg.setAttribute("baseProfile", "tiny");
    mySvg.setAttribute("height","300px");
    mySvg.setAttribute("width","300px");
    container.appendChild(mySvg);
    }

    line = function() {
    x=x-10;
    y=y-10;
    var L1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
    L1.setAttribute("x1", "100"); L1.setAttribute("y1", "100");
    L1.setAttribute("x2", x); L1.setAttribute("y2", y);
    L1.setAttribute("stroke", "#05adc7");
    L1.setAttribute("stroke-width", "2px");
    mySvg.appendChild(L1);
    }
})
</script>

编写SVG脚本时遇到问题

2 个答案: