html - SVG 中的标题：如何让它看起来更快？

Question

我有一个带有 JS 脚本的 html 页面，它生成由许多多边形组成的 SVG 图像（SVG 是在 HTML 中内联添加的）。我给了其中一些标题，以便用户可以悬停并获得标题。

例子：

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,10 5,7 10,10 10,16 5,19 0,16" fill="rgb(114,132,56)" stroke="rgb(114,132,56)" stroke-width="1"><title>Washington</title></polygon>
</svg>

浏览器显示此文本有延迟。

我希望它出现得更快。

这是可行的吗？还是我必须更改结构以使用类似地图的图像？

我找到了如何自定义此工具提示的外观，但没有找到如何更改显示速度。

标签： htmlsvgbrowser

Answer 1

没有办法通过 CSS 来改变它。但是，您可以使用 Javascript 模仿工具提示。这是一个改进@Timmmm 解决方案的示例。改进在于title为使用屏幕阅读器的用户保留元素。

function showTooltip(event) {
  let element = event.target;
  let tooltipElement = document.getElementById('tooltip');
  let title;

  if (!element.dataset.title) {
    let titleElement = element.querySelector('title');
    title = titleElement.innerHTML;
    event.target.setAttribute('data-title', title);
    titleElement.parentNode.removeChild(titleElement);
  } else {
    title = element.dataset.title;
  }
  
  tooltipElement.innerHTML = title;
  tooltipElement.style.display = 'block';
  tooltipElement.style.left = event.pageX + 10 + 'px';
  tooltipElement.style.top = event.pageY + 10 + 'px';
}

function hideTooltip() {
  var tooltip = document.getElementById('tooltip');
  tooltip.style.display = 'none';
}

#tooltip {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 3px;
  padding: 2px 4px;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon  
         onmousemove="showTooltip(event);"
         onmouseout="hideTooltip();"
         points="0,10 5,7 10,10 10,16 5,19 0,16"
         fill="rgb(114,132,56)"
         stroke="rgb(114,132,56)"
         stroke-width="1">
       <title>Washington</title>
    </polygon>
</svg>

<div id="tooltip" style="position: absolute; display: none;"></div>

当存在许多形状时，为了优化小文件大小，可以将样式和事件绑定移出 SVG 并移入 Css / Javascript：

function showTooltip(event) {
  let element = event.target;
  let tooltipElement = document.getElementById('tooltip');
  let title;
  if (!element.dataset.title) {
    let titleElement = element.querySelector('title');
    title = titleElement.innerHTML;
    event.target.setAttribute('data-title', title);
    titleElement.parentNode.removeChild(titleElement);
  } else {
    title = element.dataset.title;
  }
  
  tooltipElement.innerHTML = title;
  tooltipElement.style.display = 'block';
  tooltipElement.style.left = event.pageX + 10 + 'px';
  tooltipElement.style.top = event.pageY + 10 + 'px';
}

function hideTooltip() {
  var tooltip = document.getElementById('tooltip');
  tooltip.style.display = 'none';
}

document.addEventListener('DOMContentLoaded', function(event) {
  const tooltipTriggers = document.querySelectorAll('polygon');
  Array.from(tooltipTriggers).map(trigger => {
    trigger.addEventListener('mousemove', showTooltip);
    trigger.addEventListener('mouseout', hideTooltip);
  })
});

.tooltip {
  position: absolute;
  background: cornsilk;
  border: 1px solid black;
  border-radius: 3px;
  padding: 2px 4px;
}

svg .grey {
  fill: rgb(114, 132, 56);
  stroke: rgb(114, 132, 56);
  stroke-width: 1;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon
         class="grey"
         points="0,10 5,7 10,10 10,16 5,19 0,16">
       <title>Washington</title>
    </polygon>
</svg>

<div id="tooltip" class="tooltip" style="display: none;"></div>