操作svg文件会用到的方法

1.获取svgDocument

svgDoc = document.getElementById("gird").getSVGDocument();      

注:gird是嵌入svg的id号  


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

4. 创建元素 svgDoc.createElementNS(svgns, "text");    

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”;


你可能感兴趣的:(svg,xml,javascript)