Javascript 编写SVG脚本时遇到问题_Javascript_Svg

Javascript 编写SVG脚本时遇到问题

javascript svg

Javascript 编写SVG脚本时遇到问题,javascript,svg,Javascript,Svg,我在通过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"); funct

我在通过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>


x=135；
y=135；
var container=document.getElementById（“svgbox”）；
var mySvg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
函数svg（）{
setAttribute（“版本”，“1.2”）；
setAttribute（“baseProfile”、“tiny”）；
setAttribute（“高度”，“300px”）；
setAttribute（“宽度”，“300px”）；
container.appendChild（mySvg）；
}
函数行（）{
x=x-10；
y=y-10；
var L1=document.createElements（“http://www.w3.org/2000/svg“，”行“）；
L1.setAttribute（“x1”，“100”）；L1.setAttribute（“y1”，“100”）；
L1.setAttribute（“x2”，x）；L1.setAttribute（“y2”，y）；
L1.设置属性（“笔划”，“#05adc7”）；
L1.setAttribute（“笔划宽度”、“2px”）；
mySvg.appendChild（L1）；
}

以下是正文：

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

但是当我点击按钮时，我得到一个错误，告诉我变量“container”为空。有人知道问题出在哪里吗？

如果您将行

var container=document.getElementById（“svgbox”）
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
事件或窗口之后声明容器。onload
事件被触发。
这是DOM脚本中常见的问题，对于SVG和HTML都是如此。问题在于，当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>


$（文档）.ready（函数（）{
x=135；
y=135；
var container=document.getElementById（“svgbox”）；
var mySvg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
svg=函数（）{
setAttribute（“版本”，“1.2”）；
setAttribute（“baseProfile”、“tiny”）；
setAttribute（“高度”，“300px”）；
setAttribute（“宽度”，“300px”）；
container.appendChild（mySvg）；
}
行=函数（）{
x=x-10；
y=y-10；
var L1=document.createElements（“http://www.w3.org/2000/svg“，”行“）；
L1.setAttribute（“x1”，“100”）；L1.setAttribute（“y1”，“100”）；
L1.setAttribute（“x2”，x）；L1.setAttribute（“y2”，y）；
L1.设置属性（“笔划”，“#05adc7”）；
L1.setAttribute（“笔划宽度”、“2px”）；
mySvg.appendChild（L1）；
}
})
事实证明，最简单的方法是在行函数中包含容器。谢谢你的回答。另一个简短的问题。。。。我想我可以通过在head标记中触发onload事件来绕过代码美学和功能性问题。但这不起作用。有人知道为什么吗？你说的“在head标记中激活onload事件”是什么意思？顺便说一句，以上是DOM脚本中一种相当规范的方法，无论是HTML还是SVG。因此，大多数JavaScript库都包含一些方法来简化它。