如果使用 <object> 嵌入 SVG 图像HTML 文档中的元素，SVG 内容是否有单独的 DOM？ (与页面本身的 DOM 分开。)
具体来说，如果我嵌入多个 SVG 图像并且它们包含 id标签在图像中是唯一的，但在图像之间不是唯一的，这样可以吗？
最佳答案
这样就可以了。对象中的所有 id 都被隐藏。
对象内的 SVG 可以包含本地请求以及驻留在父 HTML 中的函数调用。这些函数可以在父 html 文档和/或对象内执行操作。 但是，父对象无法直接访问对象的 svg 元素。
下面是一个示例，显示了各种父对象函数与本地对象函数。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG in Object : local requests & parent.functions</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>SVG in Object : local requests & parent.functions </h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
SVG within an object can include both local requests, plus function calls that are resident in the parent HTML. These functions can perform actions in either the parent html document and/or within the object.
<i>The parent, however, cannot directly access the object's svg elements.</i>
</div>
<table>
<tr align=center>
<td>
<div style='width:400px;height:400px;background-color:lightgreen'>
<object data="obj.svg" type="image/svg+xml" id="objsvg" width="400" height="400"></object><br />
</div>
<i>object SVG</i>
</td>
<td>
<div id=svgDiv style='width:400px;height:400px;background-color:lightgreen'>
<svg id="mySVG" width="400" height="400" id="mySVG">
<circle id="myCircle" cx="200" cy="50" fill="red" r="40" />
<rect id="myRect" x="160" y="200" fill="green" width="150" height="120" />
</svg>
</div>
<i>inline SVG (parent)</i>
</td>
</tr></table>
<br />
<i>Click on elements in the object</i><br /><br />
<object data="obj.svg" type="image/svg+xml" id="objsvg" width="400" height="400"></object>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF23<br /></div>
<script id=myScript>
/* obj.svg file
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" id="mySVG">
<circle onclick="myRect.setAttribute('fill','white')" id="myCircle" cx="100" cy="100" fill="blue" r="80" />
<rect onclick="parent.clickMe(evt)" id="myRect" x="160" y="200" fill="red" width="200" height="100" />
<ellipse onclick='parent.myCircle.setAttribute("fill","plum")' cx='180' cy='100' rx='80' ry='40' fill='lime' />
</svg>
*/
/* ---only works in IE---
onclick="myRect.setAttribute('fill','white')"
*/
//---function call in object---
function clickMe(evt)
{
var target=evt.target
target.setAttribute("fill","orange")
parent.myRect.setAttribute("fill","orange")
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
jsValue.value=myScript.text
}
</script>
</body>
</html>
关于html - 一页中存在多个 SVG <object>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22517923/