Нажмите координаты события в SVG - PullRequest
Новая
       20

Нажмите координаты события в SVG

0 голосов
/ 21 февраля 2019

Этот HTML-код, содержащий SVG: 

<div class="container">
  <div class="spacer"></div>
  <svg>
    <g id="polygonGroup" transform="translate(80, 50)">
      <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon>
      <polygon points="10,-10 35,-30 60,-10 60,30 10,30"></polygon>
      <polygon class="origin" points="-4,0 0,4 4,0 0,-4"></polygon>
    </g>
    <g id="textGroup" transform="translate(80, 50)">
      <text x="-35" y="10">Text</text>
      <text x="35" y="10">Text</text>
    </g>
  </svg>
</div>

и этот простой обработчик события щелчка jQuery: 

function clicked(event) {
    console.log(event.offsetX, event.offsetY);
}

$('svg').click(clicked);

, как показано здесь: https://jsfiddle.net/1ht0L8y6/6/ имеют разные поведения в разных браузерах:

Chrome: Координаты основаны на левом верхнем углу элемента SVG, независимо от того, где я нажимаю внутри SVG.Это поведение, которое я хочу.

Firefox: Координаты основаны на верхнем левом углу любого элемента, в котором я нахожусь, который может быть SVG, многоугольником или текстом.

IE и Edge:

  • Когда в SVG, но не в любом из его подэлементов, координаты основаны на элементе SVG.
  • При нахождении в многоугольнике координаты основаны на источнике группы <g> с ее смещением translate (т. Е. Черный ромб).Отрицательные координаты возможны таким образом, в отличие от Chrome или Firefox.
  • Я наблюдал другое поведение для текстовых элементов в этих браузерах: они дали бы координаты, основанные на нижней середине текстового элемента.Но мне не удалось воспроизвести это в скрипке;в скриптах текстовые элементы ведут себя так же, как полигоны в этих браузерах.

Какой надежный кросс-браузерный способ получить координаты клика?

1 Ответ

0 голосов
/ 21 февраля 2019

Я добавил в ваш код функцию определения положения мыши в SVG.

let svg = document.querySelector('svg')

function clicked(event) {
  let m = oMousePosSVG(event);
    console.log(m.x,m.y);
}

svg.addEventListener("click", clicked)


function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}
svg{border:1px solid}
<div class="container">
  <div class="spacer"></div>
  <svg>
    <g id="polygonGroup" transform="translate(80, 50)">
      <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon>
      <polygon points="10,-10 35,-30 60,-10 60,30 10,30"></polygon>
      <polygon class="origin" points="-4,0 0,4 4,0 0,-4"></polygon>
    </g>
    <g id="textGroup" transform="translate(80, 50)" fill="red">
      <text x="-35" y="10">Text</text>
      <text x="35" y="10">Text</text>
    </g>
  </svg>
</div>

Чтобы узнать больше об обнаружении мыши в SVG, я рекомендую эту книгу: Использование SVG с CSS3 и HTML5: векторная графика для веб-дизайна

Надеюсь, это поможет.

...