кросс-браузерный SVG> HTML

Question

Питер Коллингридж, очень уважаемый участник Stack Overflow, создал наш SVG, о котором мы спрашивали о Stack, из предоставленных изображений.

Вы можете увидеть это здесь: [удаленная ссылка]

Теперь я бродил весь день, пытаясь найти лучшее средство для преобразования этого в html, чтобы мы могли добавлять события и фактически встраивать их в наш html. Хотя я понимаю, что он может быть встроен прямо в последние браузеры, и, очевидно, то есть 9 теперь совместимо с svg, обновляемой с их vml.

Я посмотрел на svgweb, keith wood и raded, а также на Ample.

Я просто не могу точно воспроизвести то, что нам нужно в html, во всех браузерах, esp: ff, chrome и т. Д. 8 +

Может кто-нибудь направить меня в правильном направлении. Более того, я никогда не работал с svg-файлами, и поэтому понятия не имею, как я могу добавить onclick и обработчики событий для каждого элемента, который вы видите в примере.

Любая помощь приветствуется, пожалуйста.

Сайт, на котором он будет работать, использует библиотеку jQuery, если это поможет.

Answer 1

Я написал по электронной почте напрямую, но если кто-то еще заинтересован в интеграции SVG в HTML, то это был мой подход.

Добавление событий onclick в SVG

Как говорит Soumya92, вы можете добавить их непосредственно в элементы SVG, например:

<path onclick="alert('Alert!');"/>

Для более сложной функции вы можете добавить ECMASscript (по сути, Javascript) в SVG. Например.

<svg>
 <script type="text/ecmascript"> 
    <![CDATA[
      function myfunction(evt){
        alert(evt.target.getAttributeNS(null, "alert_text"));
      }
    ]]>
  </script>

  <path id="my_path" alert_text="Alert!" onclick="myfunction(evt)" d="..."/>
</svg>

Для вызова функций JavaScript, которые существуют в вызове HTML:

top.myfunction()

Управление SVG из HTML Вставьте SVG в HTML с помощью:

<embed name="mySVG" src='svg_filename.svg'></embed>

Убедитесь, что HTML и SVG находятся в одной папке, иначе Javascript не сможет получить к ним доступ. Чтобы получить доступ к элементу SVG с помощью Javascript, добавьте функцию к элементу сценария HTML:

function ready(){
    svgdoc = document.svg_map.getSVGDocument();
    svgRoot = svgdoc.documentElement;
}

И позвоните в SVG с помощью:

function init(evt) {
     top.ready()
}

И вызвать это внутри самого элемента SVG, например,

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  version="1.2"
  onload="init(evt)">

Наконец, теперь вы можете выбирать элементы SVG и манипулировать ими. Например:

svgdoc.getElementById('my_path').setAttributeNS(null, "fill", "#ff0000");

Я думаю, что это должно охватывать большинство основных вариантов. Это определенно работает с самой последней версией Firefox. Он должен работать для Chrome, но только если файлы на веб-сервере - если они находятся только на вашем компьютере, блокируют Javascript доступ к одному файлу из другого. Я не могу поручиться за другие браузеры.

Answer 2

Обычные обработчики типа onclick, кажется, работают нормально. Просто добавьте что-то вроде

<path onclick="alert('Text here');">
    ...
</path>

Firefox Nightly, Internet Explorer 9 и Chrome поддерживают это просто отлично. Safari 5 в Windows вообще не отображает SVG.