尝试为内联 SVG 创建样式化的工具提示

Posted 2023-03-06

【中文标题】尝试为内联 SVG 创建样式化的工具提示

【英文标题】：Trying to create a styled tooltip for an inline SVG

【发布时间】：2021-11-25 14:01:52

【问题描述】：

Js 新手我正在通过内联 svg 构建交互式发音指南。

您可以在这里查看：https://codepen.io/r-pg/pen/OJgoXWQ

我目前正在尝试添加将显示相关句子的基本样式工具提示。我已经绑定了它相对于光标位置的坐标。

我为此使用的 js 在这里：

function tooldef() 
  let t1 = document.querySelector('text[data-tooltip]');
  let t2 = document.querySelector('text:nth-of-type(2)');

  t1.addEventListener('onmousemove', showToolTip(evt));
  t2.addEventListener('onmousemove', showToolTip(evt));


function showToolTip(evt) 
  let t = evt.currentTarget;
  let phrase = t.getAttribute('data-tooltip');

  document.getElementById('tooltip').innerhtml = phrase;
  tooltip.style.display = "block";

  tooltip.style.left = evt.offsetX + 0 + 'px';
  tooltip.style.top = evt.offsetY + 0 + 'px';
  /* console.log(tooltip);*/
  console.log(evt.offsetX);
  console.log(evt.offsetY);


function hideToolTip(evt) 
  tooltip.style.display = "none";

当通过 codepen 或本地加载时，此功能非常好，但是当我将其应用于 Wordpress 时，它会将工具提示推向正确的广告，我无法确定原因。代码有问题还是 WP 内部问题？

【问题讨论】：

有点难以分辨——但我的猜测可能是 %'s 中指定的工具提示的转换/翻译 CSS 可能是罪魁祸首。您可能必须根据 SVG 最终的大小动态计算像素等效值 - 或者将该变换直接移动到 SVG 中，以便它采用相对于 SVG 而不是 Body 元素的单位。

感谢您的建议。检查代码后，我实际上注释掉了翻译 CSS，结果仍然是一样的。使用 offsetX/Y 将其发送到左侧，而 pageX/Y 和客户端 X/Y 将其发送到右侧。我有这样一种方式，我可以检索目标的 XY 坐标但是我无法让工具提示显示在那个确切的点上，有没有一种方法可以设置这些相对于 SVG 点的坐标？谢谢

【参考方案1】：

您用于定位工具提示的代码假设了以下几点：

您的 SVG 已达到 100% 的比例。 您的 SVG 位于页面的左上角

如果您将 SVG 嵌入到其他内容中，那么其中一个或两个将不再适用。

您将 mousemove 事件附加到 SVG <text> 元素。所以事件中返回的坐标将在 SVG 坐标空间中。如果 SVG 缩放到 1070 x 900 以外的任何尺寸，那么您的事件坐标将与页面坐标不匹配。

如果您始终以 1070 x 900 显示 SVG，那么您的解决方法可能很简单，只需获取 SVG 的页面偏移量，然后将该 X 和 Y 位置添加到事件中返回的位置。

但是，如果您要缩放 SVG，则需要将坐标从 SVG 坐标转换为页面坐标。关于该主题还有许多其他问题。比如这个：https://***.com/a/48354404/1292848