svg html 鼠标滚轮交互,svg与html的交互

在IE上运行正常，但在谷歌浏览器运行时会报以下异常，

解决方法：放到服务器上运行即可

感谢博主大大

button.svg

/p>

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg"

οnlοad="init(evt)"

οnclick="showCurColor(evt)"

>

height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"

/>

transform="scale(1.3,1)"

id="text"

y="60.196808"

x="17.778425"

style="font-size:21.89170647px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"

>click me

htmlsvgmuctrl.html

htmlsvgmuctrl

function setCurColor(color)

{

var strColor = document.getElementById("curcolor");

strColor.innerHTML = color;

}

function setColorOfRect(color)

{

var svgEle = document.getElementById("svgEle");

var svgDoc = svgEle.getSVGDocument();//获得svg的document对象

var rect = svgDoc.getElementById("rect");

rect.style.fill = color;

}

html与svg间的js函数相互调用

---

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

blue

red

yellow

the current color is:

---

© Copyright 2011 by SwineX