SVG 和 RevealJS 中的鼠标位置

Question

我正在使用 RevealJS 创建一个演示文稿，并希望合并一些使用 D3 创建的交互式 SVG 可视化效果。之前我已经毫无困难地完成了很多次，但这次我遇到了一些困难。经过一些调试后，我将问题追溯到以下几点：由于某种原因，当整个内容都包含在 RevealJS 中时，鼠标相对于 SVG 的位置没有正确报告。

我的原始代码版本使用标准 D3 技术来获取鼠标位置。不过，为了简化和隔离问题，我取消了 D3，现在使用 vanilla Javascript 来获取鼠标位置，如 this Whosebug answer 中所述。我的代码（作为堆栈片段实现）如下所示：

var info =  document.getElementById("info");
var svg =  document.getElementById("svg");
pt = svg.createSVGPoint();
var cursorPoint = function(evt){
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove',function(evt){
  var loc = cursorPoint(evt);
  info.textContent = "(" + loc.x + ", " + loc.y +   ")";
},false);

svg {
  border: solid black 1px;
  border-radius: 8px;
}

<div id="info">pos</div>
<svg id="svg" width="300" height="200"></svg>

当我运行它在我的 Mac 上的 Firefox 中的 RevealJS 中时，我得到了非常不同的数字 - 好像坐标已经移动了（-423，-321）或一些其他大的负数对。我在下面添加了一个屏幕截图来说明这一点。鼠标没有出现在屏幕截图中，但靠近左上角，因此它应该显示为 (3,5) 或类似的一些小值。

我假设 RevealJS 正在对 SVG 执行一些额外的转换，但我找不到它，我希望有一些 RevealJS 推荐的方法来处理这个问题。

RevealJS version here 有一个完整的工作版本（好吧，实际上并不正确）。它与上面的堆栈片段中的代码几乎完全相同，但包含在一个最小的 RevealJS 模板中。

再仔细研究一下，Firefox 似乎会出现此问题，但 Chrome 不会。我运行在我 1 岁的 Macbook Pro 上使用这些程序的当前版本。我真的很喜欢一些适用于各种浏览器的代码，并且肯定希望它在 Firefox 和 Chrome.

中都运行

Answer 1

请注意使用 CSS tranforms 创建幻灯片动画是多么优雅，但它不是最可靠的显示方法，因为它会在浏览器中产生不一致的结果，我想你会做一些事情这些坐标稍后，您可能需要鼠标指针的精确位置。

你是对的 reveal.js
发生了意想不到的事情基本上，使用 scale and translate 时，SVG 元素向右下移并缩放，但指针的坐标就好像您将其悬停在其原始位置和大小区域，然后相对于当前布局进行计算，因此负值，请取一个看图

所以我要从 reveal.js 中的 layout() 函数中删除这一行：

transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );

用于使元素居中。一套 Firefox 和 Chrome 的语句（无需检查 features.zoom 在 layout() 函数中）我想水平居中滑动元素：

dom.slides.style.left = '0';
dom.slides.style.top = 'auto';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = '0';

Reveal.initialize({});
var info = document.getElementById("info");
var svg = document.getElementById("svg");
pt = svg.createSVGPoint();
var cursorPoint = function(evt) {
  pt.x = evt.clientX;
  pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove', function(evt) {
  var loc = cursorPoint(evt);
  info.textContent = "(" + loc.x + ", " + loc.y + ")";
}, false);

svg {
  background-color: white;
  border: solid black 1px;
  border-radius: 8px;
}

<script src="https://cdn.rawgit.com/Nasdav/revealjs-for-SO-answer/b6ea3980/reveal.js"></script>

<script src="https://cdn.rawgit.com/hakimel/reveal.js/master/lib/js/head.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/css/reveal.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/lib/css/zenburn.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/css/theme/sky.css" id="theme">

<body>

  <div class="reveal">
    <div class="slides">
      <section>
        <h2 style="font-size:150%">Mouse position in RevealJS</h2>
        <p style="font-size:75%">
          Make sure to click "full page" at the right most side of "Run Code Snippet". Then hover over the SVG below to get the "position" of the mouse in the SVG. The position is obtained using a standard javascript technique and works fine in
          <a href="non_reveal_version.html">this non-reveal version</a>. For some reason though. The values are correct now in Firefox when RevealJS is present. It works well in Chrome, though.
        </p>
        <svg id="svg" width="300" height="200"></svg>
        <div id="info">pos</div>
      </section>
    </div>
  </div>

问题已解决您有一种可靠的方法可以在 SVG 区域中从 (0,0) 到 (300,200)

这里，如果你想让幻灯片和上一张一样大（稍微大一点），坐标会稍微不准确 and/or responsive to resizing : 在和之前代码一样的地方，我会让宽度和字体大小有百分比（我可以对这里有固定大小的 SVG 本身这样做）

dom.slides.style.width = '90%';
dom.slides.style.fontSize= scale*100+'%';

SVG 和 RevealJS 中的鼠标位置

Mouse position in SVG and RevealJS

javascript

svg

reveal.js