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

最新推荐文章于 2023-05-11 00:15:00 发布

北冥有鱼94851

最新推荐文章于 2023-05-11 00:15:00 发布

阅读量1.5k

点赞数

分类专栏： svgjs 文章标签： svg svg.js group text href

本文链接：https://blog.csdn.net/u010023409/article/details/77335084

版权

svgjs 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

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