SVG图片元素实现Tooltip提示功能

最新推荐文章于 2024-01-09 00:13:19 发布
最新推荐文章于 2024-01-09 00:13:19 发布
阅读量6.3k 收藏 2
点赞数
文章标签： path xml encoding layer function c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j_sam_2009/article/details/7340692
版权

1、实现SVG图片中某些元素需要提示(Tooltip)的功能

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   id="svg2"
   version="1.1"
   width="300"
   height="300.29999"
   sodipodi:docname="jabil.svg"
   οnlοad="LoadHandler(evt)">
  <script  xlink:href="../js/Title.js"/>  <!--必须的Js文件-->
  <script>
	var xmlns="http://www.w3.org/2000/svg";
	//ToopTip提示  必须的
	//参数"12"表示字体的大小
	function LoadHandler(evt){
           new Title(evt.target.ownerDocument,12);
        }
  </script>
  <metadata
     id="metadata8">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs6" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     id="namedview4"
     showgrid="false" />
  <g
     transform="translate(0,-479.69998)"
     inkscape:label="a"
     id="layer1"
     inkscape:groupmode="layer" />
  <g
     transform="translate(-178.43235,-344.78916)"
     id="g4536"
     οnclick="showWindown(1)">
    <path
       transform="translate(-280.21711,-187.73664)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-06-6"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <title id="title1">提示1</title>   <!--在每一个需要出现Tooltip（提示）的元素内添加该<title>....</title>标签即可-->
  </g>
  <g
     id="g4541"
     οnclick="showWindown(2)"
     transform="translate(-178.19091,-344.44771)">
    <path
       transform="translate(-251.94862,-188.07809)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-5-1-5"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:SimSun;-inkscape-font-specification:SimSun"
       x="312.39328"
       y="428.49713"
       id="text4059"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4061"
         x="312.39328"
         y="428.49713">2</tspan></text>
    <title
       id="title2">提示 2</title>
  </g>
  <g
     transform="translate(-179.25667,-330.30557)"
     id="g4551"
     οnclick="showWindown(10)">
    <path
       transform="translate(-279.39279,-162.18259)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-8-1"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:SimSun;-inkscape-font-specification:SimSun"
       x="281.79181"
       y="454.72696"
       id="text4067"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4069"
         x="281.79181"
         y="454.72696">10</tspan></text>
    <title
       id="title10">提示 10</title>
  </g>
  <g
     transform="translate(-179.59811,-331.12989)"
     id="g4556"
     οnclick="showWindown(11)">
    <path
       transform="translate(-250.54142,-161.35827)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-5-4-0"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:SimSun;-inkscape-font-specification:SimSun"
       x="310.35318"
       y="455.0184"
       id="text4071"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4073"
         x="310.35318"
         y="455.0184">11</tspan></text>
    <title
       id="title11">提示 11</title>
  </g>
  <g
     transform="translate(-179.38401,-331.12989)"
     id="g4561"
     οnclick="showWindown(24)">
    <path
       transform="translate(-224.16304,-161.35827)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-0-1-9"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:SimSun;-inkscape-font-specification:SimSun"
       x="336.58304"
       y="455.60132"
       id="text4075"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4077"
         x="336.58304"
         y="455.60132">24</tspan></text>
    <title
       id="title24">提示 24</title>
  </g>
  <g
     transform="translate(-178.19091,-345.39409)"
     id="g4546"
     οnclick="showWindown(9)">
    <path
       transform="translate(-225.35614,-187.13171)"
       sodipodi:type="arc"
       style="fill:#8498b7;fill-opacity:1;fill-rule:evenodd;stroke:none"
       id="path2995-0-4-5-5"
       sodipodi:cx="566.31079"
       sodipodi:cy="613.2973"
       sodipodi:rx="8.2432432"
       sodipodi:ry="8.2432432"
       d="m 574.55403,613.2973 c 0,4.55262 -3.69062,8.24325 -8.24324,8.24325 -4.55262,0 -8.24324,-3.69063 -8.24324,-8.24325 0,-4.55262 3.69062,-8.24324 8.24324,-8.24324 4.55262,0 8.24324,3.69062 8.24324,8.24324 z" />
    <text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:SimSun;-inkscape-font-specification:SimSun"
       x="338.51324"
       y="429.66168"
       id="text4063"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4065"
         x="338.51324"
         y="429.66168">9</tspan></text>
    <title
       id="title9">提示 9</title>
  </g>
</svg>

本例的 Title.js文件下载

志志
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用svg做折线图以及节点tooltips显示
jifukui的专栏
09-14 998
最近的工作中准备做一个折线图去显示设备的当前温度变化，最开始准备使用echarts进行了相关的定制以及进行了压缩但是发现最小的大小还是300多K字节，由于我们的网页程序存储在flash上，flash的空间大小为2m其中还要留一半给固件程序升级使用，所以空间大小让我只能望洋兴叹，还要兼容老的一些浏览器不敢完全去使用canvas，所以只能使用svg，由于本人也是初次的使用svg还想实现echarts的一些功能和特效，最起码需要在鼠标悬浮在节点上时显示当前节点的信息，也浏览了很多人的做法，感觉没太明白...
vue+d3给svg上的dom元素添加toolTip
Fauna的博客
06-26 3087
目录1. 需求描述2. 项目架构3. 实现方案4. 根据项目需求进行一些改变参考 1. 需求描述 使用d3绘制了一张svg图，现在需要对图上的元素添加浮动提示。 项目提示要求： 只针对某些元素添加浮动提示 可能有很多条提示信息，需要将他们成列表状显示 国际化时需要动态调整tip的宽度 2. 项目架构 这个前端项目使用的vuejs；绘制svg图使用的d3(emmmmm 可能大材小用，因为实际上需...
svg tooltip提示框
qq_16690239的博客
11-14 3994
tooltip提示框 svg中添加 &lt;g id="tooltip" style="pointer-events: none"&gt; &lt;rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="45" style=&quot
实现SVG图片元素Tooltip
03-10
实现SVG图片元素Tooltip功能，详情请阅读本人博客一篇关于SVG Tooltip的博文
如何在SVG元素悬停时显示工具提示div
Jackie__Chan的专栏
09-23 1792
鼠标悬停SVG元素，提示信息
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-29 2858
要实现的效果 如下图，3d 地图高亮自动轮播，展示白云区各个镇街的人口数局。 原由 为什么想到这个方案，是因为我在用 echarts-gl 实现 3d 地图效果的过程中，我发现通过 dispatchAction 触发不了 3d 的高亮。不知道大家有没有遇到，所以我实现不出自动轮播的 3d 效果，因为显示悬浮提示 tooltip 不出来，必须要 hover 的时候才行。（不知道是不是我的配置问题，如果大家有好的 3d 地图自动轮播方案，欢迎在下面评论分享。） 于是，我在想能不能用 svg 直接渲染成 dom
svg添加不同效果的提示信息
05-22
SVG 意为可缩放矢量图形（Scalable Vector Graphics）,SVG 使用 XML 格式定义图像,因此使用常规的DOM对象是无法展示在SVG对象里面的，需要处理如提示信息。
用SVG实现一个优雅的提示框
热门推荐
azl397985856的专栏
06-10 2万+
文末福利：开发者藏经阁NO.1前言Tooltips常被称为提示框（或信息提示框），提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为，而是...
HTML5 SVG弹性Tooltip提示框特效
06-24
本项目"HTML5 SVG弹性Tooltip提示框特效"利用SVG的强大功能，创建了一种独特且吸引人的用户界面元素——Tooltip。Tooltip通常用来在鼠标悬停在特定元素上时显示额外信息，它为用户提供了一种简洁的交互方式。而这个...
HTML5 SVG弹性Tooltip提示框特效特效代码
03-20
5. 更新SVG属性：根据动画函数的结果，动态更新SVG元素的属性，如宽度、高度、位置等，实现动画效果。 这个示例不仅展示了HTML5和SVG在创建复杂图形和交互方面的潜力，还体现了JavaScript库如何增强网页的动态性和...
用svg制作富有动态的tooltip
09-03
主要介绍了用svg制作富有动态的tooltip的代码以及制作过程，十分的细致全面，有需要的小伙伴可以参考下。
HTML5 SVG带弹性动画效果的Tooltip提示框
12-12
这是一款基于html5 svg的带弹性动画效果的Tooltip提示框。这些Tooltip提示框的形状使用SVG来制作，并通过anime.js来制作非常炫酷的弹性动画特效。
HTML5 SVG弹性Tooltip提示框特效.zip
07-04
HTML5 SVG弹性Tooltip提示框特效是一款使用SVG来制作，并通过anime.js来制作非常炫酷的弹性动画特效。
20150812 SVG实现Tooltip气泡效果+LESS+BOWER
Hey_Sarah
08-17 1170
使用Chrome调试样式（CSS和LESS） 添加工作目录、建立文件映射(Map to)、编辑CSS文件或者使用样式面板修改样式、保存样式 F12+Sources+右键+Add folder to workspace+选择+允许+文件+右键+Map to network  resource. F12+Sources+文件+右键+Map to file system resource
vue中使用svg封装全局消息提示组件
zxo_apple的博客
03-08 242
先看效果图 一、首先安装下载需要用到的svg相关依赖 npm install svg-sprite-loader --save-dev 二、针对没有vue.config.js文件的vue项目，直接在webpack.base.conf.js中进行如下两个配置 1.找到图片相关配置位置，添加款选出的代码 2.在图片配置后添加如下代码 三、根据添加的代码我们去src下创建一个icons文件夹，icons下面创建一个svg文件夹，用于存放svg结尾的图片 index.js文件夹中添加代码 import
vue3 封装一个Tooltip 文字提示组件
最新发布
ZMJ_QQ的博客
01-09 1138
默认展示icon图标，悬浮展示文字如果slot有内容则展示对应内容。
在SVG中如何显示鼠标提示框
chilong的专栏
09-19 9045
SVG代码如下：  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  onzoom="ZoomControl()">                      style="visibility: hidden"/>    dyn. Text  在SVG中使用的脚步文
svg图片渐入效果怎么实现
04-17
对于您的问题，可以使用CSS的transition属性来实现SVG图片渐入效果。具体实现方法可以参考下面的代码实例： ```html <svg width="100" height="100"> <rect id="rect" width="100" height="100" fill="blue"/> </svg> <style> #rect{ opacity: 0; transition: opacity 1s ease-in-out; } #rect:hover{ opacity: 1; } </style> ``` 以上代码实现了当鼠标悬停在SVG图片上时，图片的透明度从0渐变到1，实现了渐入效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值