為什么getElementById失敗了SVG？

Question

我正在嘗試調試原因

var mapWin = svgMapDoc.getElementById('Map');

留下mapWin仍為null 。 我已經設置了一個斷點和一個手表，並在我的IDE觀察窗口中出現以下令人困惑的情況：

name: svgMapDoc.getElementById('MainSVG') value: null
neame: svgMapDoc.childNodes[2].attributes["id"].nodeValue value: "MainSVG"

（注意''MainSVG'是'Map'的父級。）

所以id “MainSVG”的元素在'svgMapDoc'中，它是第三個子節點，但是getElementById無法返回它。 為什么？ 我該如何解決？

===========編輯===========

評論者要求HTML。 這很棘手，因為它非常復雜，但這里有一些片段。

它原本不是我的代碼，而是來自英國國家統計局。 他們提供對英國2011年全國人口普查數據的訪問。 他們提供的一種訪問方法是通過SOAP API，他們提供了如何在NeSS Data Exchange V2.0頁面上使用其API的示例 。 我無法讓一個示例工作。 它位於ZIP NDE Hub客戶端REST v2.0（Zip）37 Mb中的NDE v2.0 Excel客戶端 ，這是一個“基於Excel的集線器演示應用程序，允許用戶建立已保存數據的存儲庫，並通過SVG專題圖“。 請注意，我對他們的示例進行了一些更改 。

地圖<DIV> SVG數據按以下行添加到頁面中：

document.writeln('<DIV id=mapPanel style="position:absolute;left:26%;top:7%; height=63%; width=50%;">');
document.writeln('<EMBED height=100% width=100% name=svgMap onload="svgMapLoaded()" src="../Boundaries/' + svgFile + '" type=image/svg+xml>');
document.writeln('</DIV>');

svgFile變量設置為“la_12UB.svg”，該文件存在於“Boundaries”目錄中。 這是'Boundaries / la_12UB.svg'的開始。

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="external.css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve"  preserveAspectRatio="xMinYMin meet" id="MainSVG" width="395" height="420" viewBox="0 0 900 650"> 
  <g class="mapEdge" opacity="0.2">
      <rect x="0" y="0" width="100%" height="100%"/>            
  </g>
  <svg xml:space="preserve" preserveAspectRatio="xMinYMin meet" id="Map" onload="init(evt)" width="100%" height="100%" viewBox="541512 -262080 7829 10000">
      <g class="mapBackground" transform="translate(1000,500) scale(1, -1)">
          <path id="00JA" d="M 533246,308907 534698,301468 539690,302984 540167,303513 539729,302866 534716,301443 527492,299370 527194,299301 522976,298284 523340,298070 522788,297938 522896,297322 522287,296297 522752,296256 523134,295665 522992,295319 522142,295666 521979,295371 521209,295267 520981,294831 520598,295324 519801,295441 519692,294834 520037,294424 519608,293815 519307,293871 519182,293126 517207,292629 517375,292088 516523,291182 516301,291471 515933,291255 515710,292076 514043,294384 513155,295603 513611,295848 513756,296170 513511,296320 512826,296386 512500,296931 512035,297564 510765,297353 510349,297748 509529,297818 509347,298690 508718,299559 507903,299503 507472,299058 506810,299452 503855,298555 503186,298398 503176,298820 502294,299230 501879,299841 502341,300260 502671,301563 502968,301637 503035,302936 503435,302942 503614,303338 503418,304478 502550,305148 502370,304967 501950,305791 502644,306453 503260,306347 503212,306752 503764,306896 504753,306844 504914,307391 507122,306620 507966,306784 508919,307439 510829,308187 511058,308184 512364,308996 512669,309872 514367,309757 516476,308975 517551,307531 517895,307411 520168,309004 520976,309160 521409,309326 522343,307609 523190,308534 525850,307595 525946,307970 528419,309965 529405,309387 530284,310000 530904,310008 531006,310370 531399,310254 532300,309733 533178,309331 533246,308907 z"/>

將SVG從DOM放入'mapWin'的JavaScript代碼是

function svgMapLoaded() {
    if (document.svgMap && document.svgMap.contentDocument) {
        svgMapDoc = document.svgMap.contentDocument;
    } else try {
        svgMapDoc = document.svgMap.getSVGDocument();
    }
    catch (exception) {
        alert('Neither the HTMLObjectElement nor the GetSVGDocument interface are implemented');
    }
    initialiseIfReady();
}

最后我遇到麻煩的代碼是

function initialise() {
    var mapWin = svgMapDoc.getElementById('Map');
    fullExtent[0] = mapWin.getAttribute('viewBox').split(" ")[0];

Answer 1

如果您沒有正確命名SVG文件的名稱空間，則ID通常不會按預期工作。

因此，解決方案是在根<svg>元素中添加xmlns="http://www.w3.org/2000/svg"屬性以及其他必需的名稱空間聲明（例如xlink）。

Answer 2

因為EMBED不會使EMBED的ID可見。 可以embed視為頁面中的一個洞，外部進程會在其中呈現某些內容。 從瀏覽器的角度來看，內容是完全不透明的。 通常，它用於瀏覽器插件支持的視頻或奇數圖像格式-瀏覽器實際上並不假設該元素中可能包含什么。

遵循以下建議是可行的： 如何在<img>元素中訪問SVG文件的內容？

但這僅在元素的名稱空間正確時才有效：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     ...>
</svg>

沒有它，它可能是一個自定義元素，恰好具有瀏覽器不會碰到的名稱svg 。

有關詳細信息，請參閱HTML格式的SVG