Как получить доступ к элементам SVG с JavaScript

Question

Как получить доступ к элементам SVG с JavaScript

Я бездельничаю с SVG, и я надеялся, что мог создать файлы SVG в Illustrator и элементах доступа с JavaScript.

Вот Illustrator файла SVG, выгоняет (Это также, кажется, добавляет загрузку спама к началу файла, который я удалил),

Как можно, вероятно, видеть, каждый элемент имеет идентификатор, и я надеялся смочь получить доступ к отдельным элементам с JavaScript, таким образом, я мог изменить атрибут Заливки и ответить на события, такие как щелчок.

HTML является основной трясиной



    
        SVG Illustrator Test

Я предполагаю, что это - два вопроса действительно.

Действительно ли возможно сделать это этот путь, в противоположность использованию чего-то как Raphael или jQuery SVG.
Если возможно, какова техника?

ОБНОВЛЕНИЕ

В данный момент я обратился к использованию Illustrator для создания файла SVG, и я использую Raphaël JS для создания путей и просто копирую данные точки из файла SVG и вставляю его в path() функция. Создание сложных контуров тех, которые могли бы быть необходимы для карты путем кодирования данных точки вручную, (к моему знанию) непомерно сложно.

77

javascript svg raphael

задан lambda 5 August 2016 в 15:14

1 ответ

Другие вопросы по тегам:

javascript svg raphael

Похожие вопросы:

score 105 · Accepted Answer

Можно ли сделать это таким образом, в отличие от использования чего-то вроде Raphael или jQuery SVG?

Определенно.

Если это возможно, каков метод?

Этот аннотированный фрагмент кода работает:

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml"
         id="alphasvg" width="100%" height="100%"></object>

        <script>
            var a = document.getElementById("alphasvg");

            // It's important to add an load event listener to the object,
            // as it will load the svg doc asynchronously
            a.addEventListener("load",function(){

                // get the inner DOM of alpha.svg
                var svgDoc = a.contentDocument;
                // get the inner element by id
                var delta = svgDoc.getElementById("delta");
                // add behaviour
                delta.addEventListener("mousedown",function(){
                        alert('hello world!')
                }, false);
            }, false);
        </script>
    </body>
</html>

Обратите внимание, что ограничение этого метода состоит в том, что он ограничен политикой одного и того же происхождения, поэтому alpha.svg должен размещаться в том же домене, что и файл .html , в противном случае внутренняя DOM объекта будет недоступна.