如何在 SVG 的矩形内设置标题标签的样式? [复制]
Posted
技术标签:
【中文标题】如何在 SVG 的矩形内设置标题标签的样式? [复制]【英文标题】:How to style the title tag inside a rect in a SVG? [duplicate] 【发布时间】:2021-02-18 03:21:31 【问题描述】:我在矩形中有一个标题标签:
<rect rx="10" stroke="none">
<title>
ADM-04
Ana Fretta
Optiplex 3070
</title>
</rect>
当你将鼠标悬停在矩形上时看起来像这样:
有什么方法可以设置工具提示的样式吗?
【问题讨论】:
***.com/questions/10643426/… 【参考方案1】:参考Timmmm's answer,这是一个向 sag 元素添加工具提示的工作演示
const tooltips = document.querySelector('.tooltips');
function add_tooltip(ele)
const el = document.querySelector(ele);
let tp = document.createElement('div');
tp.setAttribute('class', 'tooltip');
tooltips.appendChild(tp);
tp.innerhtml = el.querySelector('title').innerHTML;
el.addEventListener('mousemove', e =>
tp.style.left = e.clientX + 10 + "px";
tp.style.top = e.clientY + 10 + "px";
tp.style.display = 'flex';
);
el.addEventListener('mouseleave', () =>
tp.style.display = "none";
);
add_tooltip('rect');
.tooltips
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: -1000;
.tooltip
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
position: fixed;
display: none;
width: 100px;
height: 100px;
display: none;
justify-content: center;
align-items: center;
<div class="tooltips">
</div>
<svg>
<rect rx="10" stroke="black" fill="white">
<title>
ADM-04
Ana Fretta
Optiplex 3070
</title>
</rect>
</svg>
【讨论】:
以上是关于如何在 SVG 的矩形内设置标题标签的样式? [复制]的主要内容,如果未能解决你的问题,请参考以下文章