svg.js知识点简单汇总
2022-02-23 本文已影响0人
花影_62b4
1、获取g元素的宽和高及位置信息，使用.getBBox()，在是svg.js中，使用SVG.find(选择器).bbox();返回的信息比下面的方法要多
let gg=document.getElementById(parentId+"Children").getBBox();
2、整个平移元素
SVG.find("#"+id).transform({translateX：数量，translateY：数量})
3、html元素与svg元素互转：svgElement.node、node.instance
4、清除内部元素 draw.clear();移除某个元素 react.remove();
5、svg里面如果想嵌套html代码，可以使用foreignObject ,此标签不兼容ie11，如果ie11上想用需要自行绘制
var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
var body = document.createElement('body'); // you cannot create bodies with .apend("<body />") for some reason
$(foreignObject).attr("x", x).attr("y", y).attr("width", width).attr("height", height)
$(foreignObject).append("<div class='my-group' style='width:" + (
width - 4
) + "px;height:" + (
height - 4
) + "px;'></div>")
6、显示隐藏事件
// 显示、隐藏事件
$(document).on('click', "g", function (e) {
e.stopPropagation();
e.cancelBubble = true;
var e = e || window.event;
var target = e.target || e.srcElement;
while (target.tagName != "g") {
target = target.parentNode
}
let className = $(target).attr("class")
if (childrenData.length > 0) {
if (className && className.indexOf("Table") > -1) {
let elementId = className.split('Table')[0];
console.log(elementId)
let group11 = document.getElementById(elementId + "Children");
if (group11) {
let status = $(group11).css("display");
if (status == 'none') {
$(group11).show();
} else {
$(group11).hide();
}
}
}
}
})
