代码之家 › 专栏 › 技术社区 › Sam Kauffman

单击SVG中的事件坐标

javascript-events svg jquery javascript

0

Sam Kauffman · 技术社区 · 6 年前

<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 click事件处理程序:

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

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

如图所示: https://jsfiddle.net/1ht0L8y6/6/

铬: 坐标是基于SVG元素的左上角的,无论我在SVG中单击何处。这是我想要的行为。

火狐: 坐标基于我所在的元素的左上角,可以是SVG、多边形或文本。

在SVG中而不是在其任何子元素中时,坐标
在多边形中,坐标是基于 <g> translate 抵消 (即黑钻石)。负坐标是可能的, 与Chrome或Firefox不同。
我观察到一个不同的行为这些浏览器中的文本元素:它们将根据文本元素的中间底部。但我没能做到在fiddle中重现;在fiddle文本中元素的行为与这些浏览器中的多边形相同。

0 回复 | 直到 6 年前

1

9

marc_s 6 年前

我在您的代码中添加了一个函数来检测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>

Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

希望对你有帮助。