Блог

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

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

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

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

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

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

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

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

Вы можете вызвать внешний файл, используя атрибут 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, позволяющую создавать векторные изображения в разных браузерах.