操作svg文件会用到的方法
1.获取svgDocument
svgDoc = document.getElementById("gird").getSVGDocument();
注：gird是嵌入svg的id号 <embed id="gird" ...... />
2. 绑定单击事件，获取鼠标xy坐标
var bg = svgDoc.getElementById("bg");
bg.onclick = function(evt) {bgMouseEvt(evt);}
function bgMouseEvt(evt) {
var str = "(" + evt.clientX + ", " + evt.clientY + ")"
}
3.坐标转换
//数值转换 （值转像素） function valueToPix(values) { var basex = 60; //原点x坐标 var basey = 500; //原点y坐标 var xOffset = 20; // 单位像素， 表示横轴的一个单位值 var yOffset = 20/5; // 单位像素 表示纵轴的一个单位值 var newPointsStr = ""; var valuePoints = values.split(' '); var i = 0; for(i=0; i<valuePoints.length; i++) { var point = valuePoints[i] var pointxy = point.split(","); var vx = pointxy[0]; //x值 var vy = pointxy[1]; //y值 var px = 0; // x坐标值 var py = 0; // y坐标值 //转换 px = vx * xOffset + basex; py = basey - (vy * yOffset); newPointsStr = newPointsStr + " " + px + "," + py } return newPointsStr; }svgns = "http://www.w3.org/2000/svg" 命名空间
5.新建元素后设置属性
xyR.setAttributeNS(null, "id", "xyR");
6. 添加一个子元素
parent.appendChild(child);
7.删除一个子元素
parent.removeChild(child);
8.文本赋值
text.textContent = “hello girl”;