Inline SVG and HTML DOM Scope for .getElementById

问题空间：

有一个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>