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

我通过这样

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

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

lwl0606

2017-03-08

源自：走进SVG

关注问题我要回答

3538

操作

收起

3 回答

qq_未知的世界_0
2018-05-21

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

0 回复有任何疑惑可以回复我~

收起回答

lwl0606 提问者
2017-03-13

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

var rectObj1 = document.createElementNS("http://www.w3.org/2000/svg","title");

var textString = document.createTextNode("Hello SVG");

rectObj1.appendChild(textString);

rectObj.appendChild(rectObj1);

1 回复有任何疑惑可以回复我~

收起回答

lwl0606 提问者
2017-03-08

<!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/150

提交

取消

走进SVG

参与学习 52695 人
解答问题 223 个

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

进入课程

本课相似问答

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

1 回答svg元素设置属性值

2 回答关于，如何将html何存为svg

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

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

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

3 回答

本课相似问答

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