SVG <script> элемент: внутри или снаружи?

Я вижу, что тег <script> может использоваться в теге svg (ref). Кроме того, элементы в теге svg доступны через JavaScript вне тега, поскольку они являются частью DOM. Я не мог найти подробностей, по которым лучше. Обычно я сохраняю все JS-коды в отдельном файле и включаю ссылку в html. Могу ли я сделать то же самое с script, предназначенным для элементов svg. Кроме того, я читаю, что я также могу дать ссылку на внешний JS файл внутри тега svg.

Чтобы быть более понятным, скажем, у меня есть веб-страница (html5) со встроенным тегом svg. svg содержал несколько базовых форм, в которых мне нужно взаимодействие с мышью. Я могу использовать jQuery, но не внешний плагин. Рекомендую ли вы сохранить все JavaScript (для элементов снаружи и внутри svg) в одном файле или сохранить часть svg отдельно. Также хорошо ли обращаться к элементам в теге svg с помощью jQuery? Любая неэффективность, если я это сделаю?

Ответы

Ответ 1

Размещение элемента <script> внутри SVG (независимо от того, используете ли вы встроенный код или ссылаетесь в другом файле с помощью xlink:href), является правильным, если ваш script подходит для самого SVG, с или без другого контекста, который может быть размещен в. Это необходимо, например, если у вас есть только сценарий SVG-документа.

Например, скажем, у вас есть HTML-страница, и вы включаете два файла SVG.

  • Первый SVG файл имеет некоторую пользовательскую анимацию, созданную с помощью JavaScript. Этот SVG файл должен иметь свой собственный script элемент.

  • Второй SVG файл - просто причудливое изображение, и вы хотите сделать это, когда вы нажмете на это изображение, будет отправлена ​​форма на вашей HTML-странице. Для этого script должен быть на вашей HTML-странице, так как он говорит как с SVG, так и с вашей HTML-формой. Здесь приведен пример где кнопки в HTML используются для управления SVG.

Линия становится более бесполезной, если вы вставляете свой контент SVG в нечто XHTML5 вместо ссылки на внешний SVG файл. Является ли этот контент SVG своим собственным зверьком или он является такой же частью HTML-страницы, как и конкретный абзац текста?

Я лично склонен встраивать свой SVG в HTML и, таким образом, сохранить все мои script вне SVG. Либо все будет работать.

Ответ 2

Вы можете вызвать внешний файл, используя атрибут xlink: href.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
     <script type="text/ecmascript" xlink:href="script.es"/>
</svg>

(источник: W3C)

Кроме того, я рекомендую вам RaphaelJS, библиотеку JavaScript, позволяющую рисовать через браузер.