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

Question

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

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

Answer 1

Размещение элемента <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. Либо будет работать, хотя.

Answer 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, позволяющую проводить кросс-браузерное векторное рисование.