svg js给group text添加超链接&改变鼠标形状

来源:互联网 发布:新京报网络直播回看 编辑:程序博客网 时间:2024/06/05 14:27

因为项目中svg group text这一块都是js生成的,不能像在html中那样直接加上a标签完事,所以采用另外一种方法来解决js中group不能生成a标签的问题

核心代码如下:

<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: 10px auto;">
var mainSvg = SVG.get('mainSvg');
var group = mainSvg.group();...
group.text(eventName).click(function(){checkAndTrans(this)}).attr({x:20,y:20,url:""}).fill("#000").font({size:15});
...

function checkAndTrans(obj){ var url = obj.attr("url"); if(url!=""){  window.open(url,"_blank"); }}

function addUnderLineForGroupText(textId){ var currentText = document.getElementById(textId); currentText.style.textDecoration = "underline"; currentText.setAttribute("fill", "#0000ff"); currentText.setAttribute("cursor", "pointer");}
function  removeUnderLineForGroupText(textId){ var currentText = document.getElementById(textId); currentText.style.textDecoration = "none"; currentText.setAttribute("fill", "#000"); currentText.setAttribute("cursor", "auto");}

如果哪位同学有更好的办法,欢迎指正