如果要使用Javascript動態地與加載到HTML5頁面的svg文件進行交互,則必須將svg加載爲內嵌。如果您加載爲<object>
,則無法使用JavaScript對其進行編程。但是,您可以通過XMLHttpRequest
將svg文件作爲xml加載,並在響應中填入DIV的innerHTML
。這個內聯SVG可以通過你的Javascript進行動態更改。這適用於所有瀏覽器。嘗試下面的文件。
假設你有一個SVG文件(my.svg)
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle id="myCircle" cx="200" cy="200" fill="blue" r="150" />
</svg>
和你的HTML5文件如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<div id="svgInlineDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
<button onClick=changeInlineCircleColor()>Change Circle Color</button>
<div id="svgObjectDiv" style='background-color:lightblue;width:400px;height:400px;'>
<object data="my.svg" type="image/svg+xml" id="objsvg" width="100%" height="100%"></object>
</div>
</center>
<script id=myScript>
function changeInlineCircleColor()
{
myCircle.setAttribute("fill","red")
}
</script>
<script>
document.addEventListener("onload",inlineSVG(),false)
function inlineSVG()
{
var SVGFile="my.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
svgInlineDiv.innerHTML=loadXML.responseText
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
</script>
</body>
</html>
也許你可以使用這樣的回答:http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript – Stephan
是的。謝謝! –
請注意,您無法訪問「」元素的內容,如果您想這樣做,則需要使用「