如何通过JS动态的给SVG中的元素添加tooltip -慕课网

首页课程实战体系课手记专栏慕课教程

如何通过JS动态的给SVG中的元素添加tooltip

来源：-

lwl0606

2017-03-08 14:14

我通过这样

$("#coalface1-path").html("<title>当前报警：12个</title>");

在谷歌浏览器生效，可以显示，但是在IE浏览器不行，不能显示提示， IE版本为11 ，求解，多谢

写回答关注

3回答

qq_未知的世界_0

2018-05-21 10:21:51

楼主还能看到我发的话吗。。。我跟你遇到了同样的问题，我是use标签....

0 0
lwl0606

2017-03-13 14:50:58

已找到解决方法，通过createElementNS 可以实现

var rectObj1 = document.createElementNS("http://www.w3.org/2000/svg","title");
var textString = document.createTextNode("Hello SVG");
rectObj1.appendChild(textString);
rectObj.appendChild(rectObj1);

0 1

lwl0606: 2017-03-08 14:16:23

<!DOCTYPE html>
<html>
<head>
	<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect data-title="ffff" id="a" x="20" y="30" title="ddd" fill="darkorange" width="200" height="150">
  </rect>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect fill="orange" x="20" y="30" width="200" height="150">
	<title>ttt</title>
  </rect>
</svg>
	<script type="text/javascript">
	$(document).ready( function(){
		  $("#a").html("<title>当前报警：12个</title>");
	});
	</script>
</body>
</html>

代码如上，多谢

0 0

走进SVG

SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货

52686 学习 · 223 问题

查看课程

相似问题

动态添加的元素transform属性不生效？？

回答 1

svg元素设置属性值

回答 1

关于，如何将html何存为svg

回答 2

求一个元素相对于非前驱节点的svg方法是什么？

回答 1

svg文件内的js和jsp页面的js怎么互相调用

回答 1

打开慕课网App查看更多内容