Добавить событие onclick в элемент SVG

Я нашел этот пример в руководстве по SVG, в котором объясняется, как можно использовать обработчик событий onclick для элемента SVG. Это похоже на код ниже:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

  <script type="text/ecmascript"><![CDATA[
      function changerect(evt)
      {
        var svgobj=evt.target;
        svgstyle = svgobj.getStyle();
        svgstyle.setProperty ('opacity', 0.3);
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>

  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
        height='100' />
</svg>

Ответ 1

Похоже, что весь JavaScript должен быть включен в SVG для его запуска. Я не смог сослаться на какие-либо внешние функции или библиотеки. Это означало, что ваш код ломался на svgstyle = svgobj.getStyle();

Это сделает то, что вы пытаетесь.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

  <script type="text/ecmascript"><![CDATA[
      function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>

  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>

Ответ 2

Демо в JSFiddle

    var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

$('#mySvg').append(pathEl);
_l+=50;
}

Ответ 3

Не забудьте добавить className/id в <use>; или использовать фактический SVG-путь/элемент также, если вы обнаруживаете вне области SVG-скрипта:

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>

Ответ 4

Если вам не нужно нажимать определенные части svg, это может быть возможным решением:

Поместите div сверху и добавьте события в этот div. z-index не требуется, если элемент svg находится перед тегом div в структуре html.

HTML

<div class='parent'>
  <div class='parent-events'></div>
  <div class='my-svg'><svg></svg></div>
</div>

CSS

.parent {
  position: relative;
}

.my-svg {
  position: relative;
  z-index: 0;
}

.parent-events {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1
}

Javascript

const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () => {
  console.log('clicked');
});

Ответ 5

Я бы предложил этот метод обработчика события onclick для элемента svg:

var svgobj = parent_svg.find('svg')[0].children;

for (i = 0; i < svgobj.length; i++) {
   element = svgobj[i];
   element.style = "cursor: pointer;";
   $(element).click(function(evt){console.log($(this))});
}

Сначала Cek, svgobj ли ваш svgobj в console.log когда он получает обработчик события onclick. С этого момента вы можете перейти к любым функциям для обработки элемента.

Вы можете увидеть, как он работает с образцом здесь:

https://jsfiddle.net/chetabahana/f7ejxhnk/20/

Примечание о том, как использовать этот образец:
- Измените статус на странице SVG Diagram to Printed,
- Нажмите один из элементов, затем cek выведите на консоль.