SVG 中的标题：如何使其显示得更快？

Question

我有一个 html 页面，其中包含生成由许多多边形组成的 SVG 图像的 JS 脚本（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>

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

我希望它显示得更快。

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

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

Answer 1

无法通过 CSS 更改此设置。但是，您可以使用 Javascript 模拟工具提示。这是一个改进 a solution from @Timmmm 的例子。改进包括为使用屏幕 reader.

的用户保留 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>

SVG 中的标题：如何使其显示得更快？

title in SVG: how to make it appear faster?

html

browser

svg