SVGのスクリプティングに問題がある

javascriptでSVGを操作する際に問題があります。私は、ボタンをクリックすることによって、行の長さを増やしたいと思います。私は頭のタグにこのコードを含めました：SVGのスクリプティングに問題がある

<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>

しかし、私はボタンをクリックしたときに、私は、変数「コンテナことを私に言ってエラーが出ます" 無効である。誰が問題が何であるか知っていますか？

出典

2011-07-23 dopatraman

これは、var container = document.getElementById("svgbox");という行をsvg関数に入れると機能します。ラインvar container = document.getElementById("svgbox");が実行されます時にDOMがまだ読み込まれていないため、コンテナは、あなたのコード内でnullある

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); 
}

理由があります。

DOMContentLoadedイベントまたはwindow.onloadイベントが発生した後でコンテナを宣言する必要があります。

出典

2011-07-23 05:12:19

これは機能しました。助けてくれてありがとう。 – dopatraman

これは、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>

出典

2011-07-23 05:16:18 jbeard4

最も簡単な方法は、コンテナをライン関数の中に含めることでした。応答していただきありがとうございます。 – dopatraman

別の簡単な質問....私はheadタグ内でonloadイベントを発生させることで、コードの美しさと機能の問題を回避できると考えました。しかし、これは機能しません。なぜ誰が知っていますか？ – dopatraman

「ヘッド・タグにonloadイベント・ファイヤーを持っていますか？」とはどういう意味ですか？ – jbeard4

SVGのスクリプティングに問題がある

答えて

関連する問題