爲什麼getElementById無法執行SVG？

我試圖調試爲什麼爲什麼getElementById無法執行SVG？

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

離開mapWin仍然null。我已經設置了一個斷點，手錶，並具有以下混亂的情況在我的IDE監視窗口：

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

（NB「MainSVG」是「地圖」的父母。）

所以與元素id「MainSVG」在'svgMapDoc'中，它是第三個子節點，但是getElementById未能返回它。爲什麼？我該如何解決它？

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

評論者都在問的HTML。這很棘手，因爲它非常複雜，但這裏有一些片段。

這不是我的代碼，而是來自英國國家統計局。他們提供英國2011年全國人口普查數據。他們提供的一種訪問方法是通過SOAP API，並提供瞭如何在頁面NeSS Data Exchange V2.0上使用其API的示例。我無法正常工作。它的編號爲NDE v2.0 Excel Client，ZIP NDE Hub Client REST v2.0 (Zip) 37 Mb是一個「集線器演示基於Excel的應用程序，它允許用戶建立一個保存數據的存儲庫，並通過SVG專題圖查看它」。請注意，我有made some changes to their sample。

地圖<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/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];

來源

2013-05-15 dumbledad

請將您的html發佈 –

添加一些代碼片段。它由很多文件組成，但希望我已經包含了足夠的內容。 @RobertLongson - 我已經包含了SVG文件的前幾行，你會發現沒有命名空間的設置。這是問題嗎？ – dumbledad

@羅伯特朗鬆，你是明星。遵循Jonathan Watt [SVG創作指南]的命名空間建議（https://jwatt.org/svg/authoring/#namespace-binding），我拿出DOCTYPE的東西，並將SVG和XLink名稱空間添加到根SVG元素。現在它工作了！如果您有時間將您的評論作爲答案，我會將其標記爲這樣。 – dumbledad

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

因此，解決方案是將xmlns="http://www.w3.org/2000/svg"屬性與任何其他名稱空間聲明（如xlink）一起添加到根<svg>元素是必需的。

來源

2013-05-15 15:22:39

因爲EMBED不會使它嵌入的ID可見。將embed想象成頁面中的一個洞，外部進程呈現某些內容。從瀏覽器的角度來看，內容是完全不透明的。通常，它用於瀏覽器插件支持的視頻或奇數圖像格式 - 瀏覽器根本不會假定該元素中可能包含哪些內容。

它下面的這個建議是可行的：How do you access the contents of an SVG file in an <img> element?

但是這隻能在元素的命名空間是正確的：

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

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

有關詳細信息，請參閱SVG in HTML。

來源

2013-05-15 15:17:22

這看起來很有趣。但是我並沒有在頁面的DOM上調用'getElementById'，而是在'getSVGDocument'的結果上調用它。當然，它應該工作？（實際上，在@ RobertLongson的評論之後，我已經爲SVG文件添加了一個名稱空間，並且它確實有效。） – dumbledad

我真的不希望'embed'暴露這些ID，但它似乎可以：http：// stackoverflow。 COM /問題/ 8496241 /如何對訪問的內容的最-嵌入標籤功能於HTML –

爲什麼getElementById無法執行SVG？

回答

相關問題