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

Question 1

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

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

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

HTML очень простой

<!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>

    </body>
</html>

Думаю, на самом деле это два вопроса.

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

ОБНОВИТЬ

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

Question 2

Можно ли сделать это таким образом, а не использовать что-то вроде 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 объекта будет недоступна.

Важная вещь для запуска этого HTML, вам нужно разместить HTML-файл на веб-сервере, таком как IIS, Tomcat.

Question 3

Если вы используете jQuery, вам нужно подождать $(window).load, потому что встроенный документ SVG может еще не быть загружен в$(document).ready

$(window).load(function () {

    //alert("Document loaded, including graphics and embedded documents (like SVG)");
    var a = document.getElementById("alphasvg");

    //get the inner DOM of alpha.svg
    var svgDoc = a.contentDocument;

    //get the inner element by id
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});

Question 4

Если вы используете <img>тег для SVG, вы не можете манипулировать его содержимым (насколько мне известно).

Как показывает принятый ответ, использование <object>- это вариант.

Мне это понадобилось недавно, и я использовал его gulp-injectво время сборки gulp для вставки содержимого файла SVG непосредственно в документ HTML в качестве <svg>элемента, с которым затем очень легко работать, используя селекторы CSS и querySelector/ getElementBy*.

Answer 1

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

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

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

HTML очень простой

<!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>

    </body>
</html>

Думаю, на самом деле это два вопроса.

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

ОБНОВИТЬ

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

Answer 2

Можно ли сделать это таким образом, а не использовать что-то вроде 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 объекта будет недоступна.

Важная вещь для запуска этого HTML, вам нужно разместить HTML-файл на веб-сервере, таком как IIS, Tomcat.

Answer 3

4

примечание к примечанию @ jbeard4: в некоторых браузерах эта политика одного и того же происхождения приводит к необходимости использовать сервер (даже если вы кодируете только html и js [serveride]), политика доступа предотвращает доступ к svg.

Michael

Answer 4

1

Важная вещь для запуска этого HTML, вам необходимо разместить HTML-файл на веб-сервере, таком как IIS, Tomcat

Хиен Нгуен

Answer 5

Как упоминал @HienNguyen, до запуска его на веб-сервере это не сработало. Возвращенное значение document.getElementById("alphasvg").contentDocumentбыло null.

am.rez

Answer 6

TL; DR: contentDocumentмосты из контекста HTML в контекст SVG

Абдулл

Answer 7

19

Если вы используете jQuery, вам нужно подождать $(window).load, потому что встроенный документ SVG может еще не быть загружен в$(document).ready

$(window).load(function () {

    //alert("Document loaded, including graphics and embedded documents (like SVG)");
    var a = document.getElementById("alphasvg");

    //get the inner DOM of alpha.svg
    var svgDoc = a.contentDocument;

    //get the inner element by id
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});

джедиз
источник

3

При использовании этого кода этот другой ответ может быть полезным дополнением: stackoverflow.com/a/5990945/1515819

Стефан Брукерт,

в случае jQuery лучше использовать $('#alphasvg').loadвместо $(window).load. Это позволит вам менять атрибут dataна лету

Вкабаченко

Обратите внимание, что хотя вы можете использовать jQuery для доступа к элементам в svg, вы не можете использовать его для добавления элементов в svg. См. Stackoverflow.com/questions/3642035/… почему.

hrabinowitz

Answer 8

3