SVG: запустить скрипт, когда документ загружен - PullRequest
Новая
       6

SVG: запустить скрипт, когда документ загружен

6 голосов
/ 06 октября 2011

У меня есть документ SVG, и я хочу иметь возможность включить в него скрипт (используя тег <script>).Внутри этого скрипта я хочу настроить функцию, которая будет вызываться, когда документ загружен и доступен для манипулирования.

Если бы я делал это с HTML и JQuery, я бы просто использовал $(document).ready(...).Я пытаюсь сделать то же самое в документе SVG, но, очевидно, я не могу использовать JQuery таким же образом.

Итак, я ищу что-то вроде:

test.svg: 

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <script type="text/ecmascript" xlink:href="myscript.js" />

    <!-- Rest of SVG body goes here -->
</svg>

myscript.js: 

function init(evt) {
    var svgDocument = evt.target.ownerDocument;
    var svgRoot = svgDocument.documentElement;
    // Manipulate SVG DOM here
}

// --> Somehow attach init() function to onload event of SVG <--

Я хочу попробовать это сделать в сценарии, а не в зависимости от явного onload="init()" в определении SVG.(Я хочу написать сценарий, который потенциально может быть включен в несколько SVG без необходимости иметь какие-либо знания о том, как работает сценарий.)

Ответы [ 4 ]

7 голосов
/ 06 октября 2011

Вот пример 

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'>
<script type="text/ecmascript">
function init(evt) {
var svgDocument = evt.target.ownerDocument;
var svgRoot = svgDocument.documentElement;
// Do whatever you like on svgRoot to manipulate your SVG DOM
}
</script>
</svg>
2 голосов
/ 08 октября 2011

Вы можете попытаться включить ваш скрипт в самом конце документа svg, тогда вам не нужно будет ждать события загрузки. Но это может не сработать, если вы ссылаетесь на какие-либо внешние файлы в документе и они еще не были загружены при запуске сценария.

2 голосов
/ 06 октября 2011

Ничто (кроме IE) не мешает вам использовать стандартные обработчики событий DOM в JS, встроенном в SVG: 

document.addEventListener('load', init);

Для IE вы обычно используете attachEvent или около того, но я не знаю, если IE (> = 9) поддерживает это в SVG.

В основном SVG-файлы автономны, поэтому DOMReady (он же DOMContentLoaded) и события загрузки не так уж далеки друг от друга (по сравнению с HTML, где десятки CSS-файлов)и изображения должны быть загружены.) Таким образом, отличие от использования события загрузки вместо события DOMReady (которое, к сожалению, еще не стандартизировано стабильно) будет незначительным.Кроме того, я никогда не пробовал, если браузеры даже запускают событие DOMReady, когда загружается DOM SVG.

2 голосов
/ 06 октября 2011

Возможно, «onload» - это событие, которое вы ищете.Смотрите здесь

...