SVG 요소에 클릭 시 이벤트 추가

SVG 요소에 클릭 시 이벤트 추가

저는 SVG 튜토리얼에서 이 예를 발견했습니다. 이 튜토리얼은 어떻게 사용할 수 있는지 설명합니다.onclickSVG 요소에 대한 이벤트 처리기입니다.아래 코드와 같습니다.

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

하지만, 이것은 효과가 없는 것 같습니다.요소를 클릭해도 아무 일도 일어나지 않습니다.

아마도 내가 PHP 스크립트 안에서 SVG를 표시하고 있다는 사실을 언급하는 것이 중요할 것입니다.echo또한, PHP 스크립트에 의해 생성된 콘텐츠는 AJAX를 사용하여 페이지로 가져온다는 점에 유의하십시오.XMLHttpRequest().

이것이 아마도 그것과 관련이 있을까요?도와주셔서 정말 감사합니다.

SVG가 실행되려면 모든 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>

JSFidle 데모

    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;
    }

svg의 특정 부분을 클릭할 필요가 없다면 가능한 해결책이 될 수 있습니다.

div를 맨 위에 놓고 해당 div에 이벤트를 추가합니다. svg 요소가 html 구조의 div 태그 앞에 있으면 z-index가 필요하지 않습니다.

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
}

자바스크립트

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

이벤트 수신기를 svg 노드에 추가합니다.

svgobj.addEventListener("click", myFunction);

추가해야 합니다.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>

나는 이 방법을 제안하고 싶습니다.onclicksvg 요소에 대한 이벤트 핸들러:

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))});
}  

먼저 확인하십시오.svgobj에 전달됨console.log날씨가 좋을 때onclick이벤트 핸들러.이 시점에서 요소를 처리하는 모든 함수로 전달할 수 있습니다.

샘플에서 작동하는 방식을 확인할 수 있습니다.

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

이 샘플 사용 방법에 대한 참고:
SVG Diagram에서 Printed 옵션으로 상태를 변경합니다.
요소 중 하나를 클릭한 다음 콘솔에서 출력을 확인합니다.

저도 같은 문제가 있었는데, div 위에 올려놓은 z 인덱스에 대한 답변이 도움이 되었습니다!

하지만, 저는 svg를 div로 감을 필요가 없다는 것을 발견했습니다. 부모가 위치한 한 z-index를 대신하여 상단에 배치할 수 있습니다.

우리는 간단히 클릭 이벤트를 svg에 추가할 수 있습니다.

1. <img class="video-svg" id="play" onclick="playVid(id)" src="assets/img/logo/play svg.png">

그런 다음 우리는 효과를 낼 CSS를 줄 수 있습니다. 왜냐하면 우리는 svg에 대한 클릭 이벤트를 만들 200에 절대적인 위치와 z-index를 주어야 합니다.

2.

.video-svg {
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 7%;
   background: no-repeat;
   border: none;
   z-index: 200 !important;
   width: 10% !important;
   position: absolute !important;
}

언급URL : https://stackoverflow.com/questions/16472224/add-onclick-event-to-svg-element