栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在SVG图形中添加工具提示?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在SVG图形中添加工具提示?

您是否可以仅使用SVG

<title>
元素及其传达的默认浏览器渲染?(注:这是不一样的
title
,你可以上使用属性DIV / IMG /跨度在HTML,它需要一个子元素命名
title

rect {  width: 100%;  height: 100%;  fill: #69c;  stroke: #069;  stroke-width: 5px;  opacity: 0.5}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p><svg xmlns="http://www.w3.org/2000/svg">  <rect>    <title>Hello, World!</title>  </rect></svg>

另外,如果您确实想在SVG中显示HTML,则可以直接嵌入HTML:

rect {  width: 100%;  height: 100%;  fill: #69c;  stroke: #069;  stroke-width: 5px;  opacity: 0.5}foreignObject {  width: 100%;}svg div {  text-align: center;  line-height: 150px;}
<svg xmlns="http://www.w3.org/2000/svg">  <rect/>  <foreignObject>    <body xmlns="http://www.w3.org/1999/xhtml">      <div>        Hello, <b>World</b>!      </div>    </body>        </foreignObject></svg>

…但是然后您需要JS来打开和关闭显示。如上所示,使标签出现在正确位置的一种方法是将rect和HTML包裹在相同的位置,从而将它们定位在一起。

要使用JS查找SVG元素在屏幕上的位置,可以使用getBoundingClientRect(),



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575067.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号