为什么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？

回答

相关问题