Если вы хотите динамически взаимодействовать, используя Javascript, с файлом svg, который загружается на вашу страницу HTML5, вы должны загрузить svg как inline. Если вы загружаете <object>
, вы не можете запрограммировать его, используя ваш javascript. Однако вы можете загрузить файл svg в виде xml через XMLHttpRequest
и заполнить ответ 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
Да. Спасибо вам! –
Обратите внимание, что вы не можете получить доступ к содержимому элемента '', вам нужно будет использовать тег '' или '