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

Я использую SVG, и я надеялся, что смогу создать SVG-файлы в Illustrator и получить доступ к элементам с Javascript.Как получить доступ к элементам SVG с помощью 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>

Как вы можете видеть, каждый элемент имеет ID, и я надеялся получить доступ к отдельным элементам с помощью 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.
Если возможно, какая техника?

UPDATE

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

источник

2010-05-02 gargantuan

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

источник

2010-07-31 21:19:22 jbeard4

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

В случае, если вы используете 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); 
});

источник

2011-05-01 15:35:43 jediz

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

Этот загрузочный лакомый кусочек спас мне жизнь. Thank-you – Russ

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

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

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

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

источник

2017-10-01 20:43:41

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

ответ

Смежные вопросы