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

Question

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

Если это лишнее, оставьте это.

Если он служит цели (даже, казалось бы, тривиальной цели, такой как умиротворение вашей среды IDE или умиротворение ваших глаз), оставьте ее.

В четко определенной спецификации редко встречаются дополнительные элементы, которые не влияют на поведение. За исключением «комментариев», конечно. Но спецификация HTML меньше спецификации дизайна и больше документа состояния текущих основных реализаций. Поэтому, когда элемент является необязательным в HTML и, похоже, не имеет никакой цели, мы можем догадаться, что необязательный характер - это просто документирование причуды в конкретном браузере.

Глядя на раздел RFC с HTML-5, связанный выше , вы видите, что необязательные теги странно связаны с наличием комментариев! Это должно сказать вам, что авторы не носят дизайнерские шляпы. Вместо этого они играют в игру «документировать причуды» в основных реализациях. Поэтому мы не можем воспринимать спекуляцию слишком серьезно в этом отношении.

Итак, решение таково: не потейте. Переходите к чему-то, что действительно имеет значение. :)

0

javascript jquery svg click dom-events

задан Brian Tompsett - 汤莱恩 29 March 2019 в 14:45

1 ответ

Другие вопросы по тегам:

javascript jquery svg click dom-events

Похожие вопросы:

score 0 · Answer 1

Я добавил в ваш код функцию определения положения мыши в 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: векторная графика для веб-дизайна

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