HTML 中的 JavaScript 和 SVG [重复]答案

【问题标题】：JavaScript and SVG in HTML [duplicate]HTML 中的 JavaScript 和 SVG [重复]
【发布时间】：2014-03-15 22:32:14
【问题描述】：

我有 JavaScript 文件。我有 SVG 文件。我也有 HTML 文件。

<head>
...
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
...
</head>
<body>
...
<img src='svgfile.svg' type='image/svg+xml' />
...
</body>

有人知道我如何在 JavaScript 中调用 SVG 的元素吗？（以圆圈为例）

【问题讨论】：

也许你可以使用这个答案：stackoverflow.com/questions/2753732/…
请注意，您无法访问<img> 元素的内容，如果您想这样做，您需要使用<object> 或<iframe> 标签。

标签： javascript html svg

【解决方案1】：

如果您想使用 Javascript 与加载到 HTML5 页面中的 svg 文件进行动态交互，您必须将 svg 加载为 inline。如果您作为<object> 加载，则无法使用您的javascript 对其进行编程。但是，您可以通过 XMLHttpRequest 将 svg 文件加载为 xml，并使用响应填充 DIV 的 innerHTML。然后可以通过您的 Javascript 动态更改此内联 SVG。这适用于所有浏览器。试试下面的文件。

假设你有一个 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>

【讨论】：