SVG 中的标题:如何使其显示得更快?
title in SVG: how to make it appear faster?
我有一个 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>
浏览器显示此文本有延迟。
我希望它显示得更快。
这可行吗?或者我是否必须更改结构以使用类似地图的图像?
我找到了如何自定义此工具提示的外观,但没有找到如何更改显示速度。
无法通过 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>
我有一个 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>
浏览器显示此文本有延迟。
我希望它显示得更快。
这可行吗?或者我是否必须更改结构以使用类似地图的图像?
我找到了如何自定义此工具提示的外观,但没有找到如何更改显示速度。
无法通过 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>