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

因为项目中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");
}

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


你可能感兴趣的:(svgjs,svg,svg.js,group,text,href)