Добавление слушателей событий в разные части svg pics - PullRequest
Новая
       0

Добавление слушателей событий в разные части svg pics

0 голосов
/ 26 сентября 2018

Мне было дано задание добавить слушателей событий в различные части SVG-элемента в виде изображения.

Объекты для отображения направлений (север, юг, восток, запад), когда щелкают соответствующие «сердца».enter image description here

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

РЕДАКТИРОВАТЬ:

SVG код: 

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="756.36981"
   height="756.36981"
   id="svg2"
   inkscape:version="0.48.4 r"
   sodipodi:docname="fourHearts.svg">
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1137"
     id="namedview3079"
     showgrid="false"
     inkscape:zoom="0.31201668"
     inkscape:cx="378.18491"
     inkscape:cy="378.18491"
     inkscape:window-x="1192"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)"
     id="north"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2816"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2820"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2822"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)"
     id="south"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2841"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2843"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2845"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)"
     id="east"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2861"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2863"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2865"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)"
     id="west"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2869"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2871"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2873"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
</svg>

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

, так как он представлен в виде картинки, а не SVG-кода

Вам не ясно здесь.Вы имеете в виду, что вы загружаете SVG, используя <img>?Если это так, то вы правы, нет никакого способа нацелиться на отдельные формы листьев.

Но если вы загружаете его как встроенный SVG, то вы можете: 

document.getElementById("north").addEventListener("click", function(evt) {
  console.log("North!");
});

document.getElementById("east").addEventListener("click", function(evt) {
  console.log("East!");
});

document.getElementById("south").addEventListener("click", function(evt) {
  console.log("South!");
});

document.getElementById("west").addEventListener("click", function(evt) {
  console.log("West!");
});

  
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="756.36981"
   height="756.36981"
   id="svg2"
   inkscape:version="0.48.4 r"
   sodipodi:docname="fourHearts.svg">
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1137"
     id="namedview3079"
     showgrid="false"
     inkscape:zoom="0.31201668"
     inkscape:cx="378.18491"
     inkscape:cy="378.18491"
     inkscape:window-x="1192"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)"
     id="north"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2816"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2820"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2822"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)"
     id="south"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2841"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2843"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2845"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)"
     id="east"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2861"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2863"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2865"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
  <g
     transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)"
     id="west"
     style="fill:#339900">
    <rect
       width="228.57143"
       height="228.57143"
       x="540.95331"
       y="128.81105"
       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
       id="rect2869"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(-81.952479,151.13084)"
       id="path2871"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
       d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
       transform="translate(77.738331,149.63069)"
       id="path2873"
       style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>
</svg>
0 голосов
/ 26 сентября 2018

Вы могли бы использовать Ткань JS , чтобы рисовать одно из сердец 4 раза как независимые фигуры и обрабатывать каждое из них отдельно там, хотя это может быть немного излишним, новот JS, который я использовал, и Codepen на случай, если это кому-нибудь поможет: 

var canvas = new fabric.Canvas('canvas');
canvas.hoverCursor = "pointer";
var context = canvas.getContext('2d');

var north = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(north) {
  north.set({
    id: 'north',
    left: 100,
    top: 68,
    width: 60,
    height: 60,
    hasControls: false,
    hasBorders: false,
    lockMovementX: true,
    lockMovementY: true,
  });
  canvas.add(north);
 });

var south = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(south) {
  south.set({
    id: 'south',
    left: 100,
    top: 132,
    width: 60,
    height: 60,
    angle: 180,
    hasControls: false,
    hasBorders: false,
    lockMovementX: true,
    lockMovementY: true,
  });
  canvas.add(south);
 });

var east = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(east) {
  east.set({
    id: 'east',
    left: 135,
    top: 100,
    width: 60,
    height: 60,
    angle: 90,
    hasControls: false,
    hasBorders: false,
    lockMovementX: true,
    lockMovementY: true,
  });
  canvas.add(east);
 });

var west = fabric.Image.fromURL('https://i.imgur.com/TZ2EFqT.png', function(west) {
  west.set({
    id: 'west',
    left: 65,
    top: 100,
    width: 60,
    height: 60,
    angle: 270,
    hasControls: false,
    hasBorders: false,
    lockMovementX: true,
    lockMovementY: true,
  });
  canvas.add(west);
 });
canvas.on('mouse:down', function(event) {
  var pos = null;
  $('#location').html(canvas.getActiveObject().id + "Hi");
  switch(canvas.getActiveObject().id) {
    case "north": 
      pos = "North";
      break;
    case "south":
      pos = "South";
      break;
    case "east":
      pos = "East";
      break;
    case "west":
      pos = "West";
      break;
  }
  $("#location").html(pos);
});

Инструкции по работе с Fabric JS

0 голосов
/ 26 сентября 2018

Вы можете использовать addEventListener для элемента SVG, а затем с помощью e.target.closest вы можете легко найти близлежащие связанные элементы.

document.querySelector('svg').addEventListener('click',function(e){
    console.log(e.target.closest('g').id);
})


document.querySelector('svg').addEventListener('click',function(e){
        console.log(e.target.closest('g').id);
    })
 <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="756.36981" height="756.36981" id="svg2"
        inkscape:version="0.48.4 r" sodipodi:docname="fourHearts.svg">
        <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10"
            inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1137" id="namedview3079"
            showgrid="false" inkscape:zoom="0.31201668" inkscape:cx="378.18491" inkscape:cy="378.18491" inkscape:window-x="1192"
            inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg2" />
        <defs id="defs4" />
        <metadata id="metadata7">
            <rdf:RDF>
                <cc:Work rdf:about="">
                    <dc:format>image/svg+xml</dc:format>
                    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                    <dc:title />
                </cc:Work>
            </rdf:RDF>
        </metadata>
        <g transform="matrix(0.58455189,0,0,0.58455189,197.9011,-204.85166)" id="north" style="fill:#339900">
            <rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
                id="rect2816" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
                id="path2820" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
                id="path2822" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
        </g>
        <g transform="matrix(0.58455189,0,0,-0.58455189,197.9011,744.00042)" id="south" style="fill:#339900">
            <rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
                id="rect2841" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
                id="path2843" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
                id="path2845" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
        </g>
        <g transform="matrix(0,0.58455189,-0.58455189,0,843.12069,98.78081)" id="east" style="fill:#339900">
            <rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
                id="rect2861" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
                id="path2863" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
                id="path2865" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
        </g>
        <g transform="matrix(0,0.58455189,0.58455189,0,-105.73137,98.78081)" id="west" style="fill:#339900">
            <rect width="228.57143" height="228.57143" x="540.95331" y="128.81105" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
                id="rect2869" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(-81.952479,151.13084)"
                id="path2871" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
            <path d="m 411.42857,400.93362 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z" transform="translate(77.738331,149.63069)"
                id="path2873" style="fill:#339900;fill-opacity:1;fill-rule:nonzero;stroke:none" />
        </g>
    </svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...