javascript 动态改变svg图形

//嵌入svg       

 <div id="svgcontainter" style="width: 760px; height: 600px;overflow: hidden;">
            <embed height="600" width="760" type="image/svg-xml" name="svgEmbed" id="svgEmbed"
                src="ksh.svg" pluginspage="http://www.adobe.com/svg/viewer/install/"></embed>
        </div> 

 

//javascript操作svg    ajax 回调函数

function callback(res)

{

svgstring=res.value;

svgViewer = document.getElementById("svgEmbed");
SVGDoc = svgViewer.getSVGDocument();
SVGRoot = SVGDoc.documentElement;
chart = SVGDoc.getElementById("chart");//svg文档中定义的<g>元素

//删除已有节点
var j = chart.firstChild;
        while (j) {
            j.parentNode.removeChild(j);
            j = chart.firstChild;
        }

//动态解析svgstring
       var new_node = svgViewer.window.parseXML(svgstring, SVGDoc);
        var svgNode = new_node.childNodes.item(0);
        var node = svgNode.childNodes;

//添加元素
        for (var i = 0; i < node.length; i++) {
            var defsElements = node.item(i).childNodes
            for (var j = 0; j < defsElements.length; j++) {
                var node_clone = defsElements.item(j).cloneNode(true);
                chart.appendChild(node_clone);
            }
        }

 

//为svgcontainter添加mousewheel事件

var svgcon = document.getElementById("svgcontainter");     
if (svgcon.addEventListener) svgcon.addEventListener('DOMMouseScroll', wheel, false);
svgcon.onmousewheel = wheel;

}

 

 

function zoomInOut(delta) {
    if (delta >= 0) {
        SvgZoomIn();
    } else SvgZoomOut();
}

function wheel(event) {
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta / 120;
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail / 3;
    }
    // else
    // delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3); // Firefox using `wheelDelta` IE using `detail`
    if (delta) zoomInOut(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}
function SvgZoomOut() //放大
{
    SVGRoot.currentScale = SVGRoot.currentScale * 1.1;
    originscale = originscale * 1.1;
}
function SvgZoomIn() //缩小
{
    SVGRoot.currentScale = SVGRoot.currentScale / 1.1;
    originscale = originscale / 1.1;
}
function Zoom() //原始大小
{
    originscale = 600/maxx>600/maxy?600/maxy:600/maxx;
    SVGRoot.currentScale =originscale;
}

 

function showJh() {
 var svgViewer = document.getElementById("svgEmbed");
 var SVGDoc = svgViewer.getSVGDocument();
 var Jhs=SVGDoc.getElementsByTagName("text");
 if (document.getElementById("Checkbox1").checked==true)
  {
     for(var i=0;i<Jhs.length;i++)
     {
       var currentTxt=Jhs.item(i);
       if (currentTxt.getAttribute("visibility")=="hidden")
       {
          currentTxt.setAttribute("visibility","visible");
       }
     }
   }
   if (document.getElementById("Checkbox1").checked==false)
  {
     for(var i=0;i<Jhs.length;i++)
     {
       var currentTxt=Jhs.item(i);
       if (currentTxt.getAttribute("visibility")=="visible")
       {
          currentTxt.setAttribute("visibility","hidden");
       }
     }
   }  
 }

 

 

function move()
 {
  // strtranlate="translate("+tx+","+ty+")";
    //chart.setAttribute("transform",strtranlate);
   SVGRoot.currentTranslate.x=tx;
   SVGRoot.currentTranslate.y=ty;
 }