Question

如果使用HTML文档中的<object>元素嵌入SVG图像，SVG内容是否具有单独的DOM？（与页面本身的DOM分开。）

具体来说，如果我嵌入了多个SVG图像并且它们包含图像中唯一的id标记，但在图像中不是唯一的，那么这样可以吗？

Answer 1

那没关系。对象中的所有id都是隐藏的。

对象中的SVG可以包括本地请求，以及驻留在父HTML中的函数调用。这些函数可以在父html文档和/或对象内执行操作。 但是，父级无法直接访问对象的svg元素。

下面是一个显示各种父对象和本地对象函数的示例。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG in Object : local requests &amp; 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 &amp; 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 />
&lt;object data="obj.svg" type="image/svg+xml" id="objsvg"  width="400" height="400"&gt;&lt;/object&gt;
<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>

一个页面中的多个SVG <object> </object>

1 个答案: