Возникли проблемы со сценариями SVG - PullRequest
Новая
       0

Возникли проблемы со сценариями SVG

1 голос
/ 23 июля 2011

У меня проблемы с манипулированием SVG через javascript.Я бы хотел увеличить длину строки, нажав кнопку.Я включил этот код в тег 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>

Но когда я нажимаю на кнопку, я получаю сообщение об ошибке, сообщающее, чтопеременная «контейнер» равна нулю.Кто-нибудь знает в чем проблема?

Ответы [ 2 ]

1 голос
/ 23 июля 2011

Это распространенная ошибка в сценариях DOM, как для SVG, так и для HTML. Проблема в том, что элемент svgbox еще не загружен при выполнении JavaScript. Самое простое решение - просто переместить тег сценария, чтобы он стал последним элементом в документе. Это немного уродливо, поэтому в большинстве библиотек 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>
1 голос
/ 23 июля 2011

Работает, если вы поместите строку 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 в вашем коде, заключается в том, что DOM еще не загружен, когда выполняется строка var container = document.getElementById("svgbox");.

Вам необходимо объявить контейнер после события DOMContentLoaded или window.onload.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...