操作svg资料会用到的方法

操作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;
      }

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

1楼xiaochangwei7894天前 16:31

占个座先 哈哈