问题空间:
我有一个SVG映射,我使用JQUERY Ajax将其内联嵌入到html中。 然后,我使用 java 脚本对 svg 对象中的许多元素进行寻址,以更改属性并根据数据系列添加事件侦听器。 数据和地图是交互式的。 用户可以更改许多排列的状态。
我也在使用 JQUERY UI 1.10.3 选项卡
有许多类别。 因此,根据演示文稿的不同,同一选项卡上可能会有多个 svg 映射副本,并且许多不同的选项卡具有相同的 svg 映射。
svg 文档的每个副本都具有相同的元素 ID。我遇到的问题是元素 ID 在 HTML DOM 中相互冲突。 因此,唯一可寻址的元素是 HTML 文档中首先出现的 svg 对象中的元素。
我的问题是:
我是否需要使元素 ID 对于 svg 对象的每个实例都是唯一的? 或者有没有办法在 HTML DOM 中为 svg 对象设置范围和上下文?
例:
每个包含div 都有一个唯一的 ID,我用它来插入 svg 文档并检索 SVG 文档。
<div id="svgMap_div_1" class="cIG" style="height: 500px; width: 750px"></div>
用于加载从 ajax 接收的 svg 文档的代码(mimeType = "image/svg+xml"):
document.getElementById('svgMap_div_1').appendChild(svgXMLObject.documentElement)
用于检索 svg 文档的代码。 svgDoc 的声明是实现它的函数的本地声明,并且是唯一的。
var svgDoc = document.getElementById('svgMap_div_1').ownerDocument;
用于更新各个元素的代码。 当相同的 svg 对象(子元素具有相同的 ID)位于同一个 HTML DOM 中时,此 javascript 将始终寻址 HTML DOM 中首先出现的 svg 对象,即使它是从离散div 中检索的,例如 id='svgMap_div_2'。
var svgElem = svgDoc.getElementById('elemID');
svgElem.setAttribute("fill", '#0000FF');
我相信问题的根源是使用所有者文档检索svgDoc。 它不是创建一个具有范围和上下文的离散对象,而是延伸到整个 DOM,以便 DOM 成为上下文。 请参阅 IDE 中的代码参考:
HTMLDocument Node.ownerDocument
Property ownerDocument http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
See Also:
Document
Since:
Standard ECMA-262 3rd. Edition
Level 2 Document Object Model Core Definition.
@type
Document
如果有必要,我可以开发一种工作算法来使所有 id 唯一,但我肯定想找到更好的方法。我已经尝试了其他方法和属性来获取有效的 svg 文档对象,但这些都不适合我。
下面是一个工作示例,用于演示当两个 svg 对象位于同一页面上的不同div 中时会发生什么。 所有四种组合都会更改第一个矩形的颜色。 如果将第二个对象中矩形的 ID 更改为"box-b"并相应地对其进行寻址("bbox_div"、"box-b"),则两个矩形将彼此独立地进行操作。
<script type='text/javascript'>
function colorBox(divID, svgElem, colorHex) {
/* DOM This is the original solution that did not work !!!*/
// var svgDoc = document.getElementById(divID).ownerDocument.
// var svgBox = svgDoc.getElementById(svgElem);
// svgBox.setAttribute("fill", colorHex);
/* querySelector */
// document.querySelector("#"+divID + " ."+svgElem).setAttribute("fill", colorHex);
/* jquery div */
// var svgBox = $('#'+divID+' svg').find('#'+svgElem);
// svgBox.css("fill", colorHex);
/* jquery class */
$('#'+divID+' svg').find('.'+svgElem).css("fill", colorHex);
}
</script>
<div style="height: 100px; width: 100px">
<a href="#" onclick="colorBox('abox_div', 'box-a', '#FF0000');return false;">Box A Red</a><br>
<a href="#" onclick="colorBox('abox_div', 'box-a', '#0000FF');return false;">Box A Blue</a><br>
<a href="#" onclick="colorBox('bbox_div', 'box-a', '#FF0000');return false;">Box B Red</a><br>
<a href="#" onclick="colorBox('bbox_div', 'box-a', '#0000FF');return false;">Box B Blue</a><br -->
</div>
<div id="abox_div" style="height: 100px; width: 100px">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.990919in"
height="0.597218in"
viewBox="0 0 71.3461 42.9997">
<style type="text/css">
<![CDATA[
.allboxes {fill:#00FF00}
]]>
</style>
<g class="box-a allboxes" transform="translate(0.24,-0.24)" fill="#e8eef7">
<rect x="0" y="0.48" width="70.8661" height="42.5197" ><title>Box A</title></rect>
</g>
</svg>
</div>
<div id="bbox_div" style="height: 100px; width: 100px">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.990919in"
height="0.597218in"
viewBox="0 0 71.3461 42.9997">
<g class="box-a allboxes" transform="translate(0.24,-0.24)" fill="#e8eef7">
<rect x="0" y="0.48" width="70.8661" height="42.5197" ><title>Box B</title></rect>
</g>
</svg>
</div>
我相信如果你有重复的 ID,严格来说就是无效的 HTML。 我建议使用其他一些机制来识别元素,要么使用类而不是 ID 或data-
属性。 然后你可以从.getElemntById()
移动到任一.querySelector()
(尝试使用JS垃圾桶):
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<rect class="rect1" width="50px" height="50px"/>
</svg>
</div>
<div id="div2">
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<rect class="rect1" width="50px" height="50px"/>
</svg>
</div>
<script type="text/javascript">
document.querySelector("#div1 .rect1").setAttribute("fill","red");
document.querySelector("#div2 .rect1").setAttribute("fill","green");
</script>
</body>
</html>
或.getElementsByClassName()
(尝试使用JS垃圾桶):
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<rect class="rect1" width="50px" height="50px"/>
</svg>
</div>
<div id="div2">
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<rect class="rect1" width="50px" height="50px"/>
</svg>
</div>
<script type="text/javascript">
document.getElementById("div1").getElementsByClassName("rect1")[0].setAttribute("fill","red");
document.getElementById("div2").getElementsByClassName("rect1")[0].setAttribute("fill","green");
</script>
</body>
</html>
如果您将 ID 属性保持原样,可能.querySelector()
也可以工作,例如:
document.querySelector("#div1 [id=rect1]")
但我仍然建议使用 data-
属性,因为这可以避免任何潜在的 ID 陷阱。
你可以使用 jQuery 的选择器,它不关心重复的 id。
function colorBox(divID, svgElem, colorHex) {
var svgBox = $('#'+divID+' svg').find('#'+svgElem);
svgBox.css("fill", colorHex);
}
演示:http://jsfiddle.net/w9KA3/1/