为什么SVG的getElementById失败? [英] Why is getElementById failing for an SVG?
问题描述
我正在尝试调试原因
var mapWin = svgMapDoc.getElementById('Map');
离开mapWin仍然null.我已经设置了一个断点和一个手表，并且在我的IDE手表窗口中有以下令人困惑的情况:
leaves mapWin still null. I have set up a breakpoint and a watch and have the following confusing situation in my IDE watch window:
name: svgMapDoc.getElementById('MainSVG') value: null
neame: svgMapDoc.childNodes[2].attributes["id"].nodeValue value: "MainSVG"
(注:"MainSVG"是地图"的父级.)
(N.B. 'MainSVG' is the parent of 'Map'.)
因此，在'svgMapDoc'中存在带有id"MainSVG"的元素，它是第三个子节点，但是getElementById无法返回它.为什么?我该如何解决?
So the element with id "MainSVG" is there in 'svgMapDoc', it is the third child node, but getElementById fails to return it. Why? How can I fix it?
===========编辑==========
=========== EDIT ===========
评论者要求提供HTML.这很棘手，因为它很复杂，但是这里有一些片段.
Commenters are asking for the HTML. This is tricky as it is quite complex, but here are some fragments.
这最初不是我的代码，但来自英国国家统计局.他们提供对英国2011年全国人口普查数据的访问.他们提供的一种访问方法是通过SOAP API，并在 NDE v2.0 Excel客户端中在ZIP NDE Hub Client REST v2.0(Zip)37 Mb ，基于Excel的集线器演示应用程序，允许用户建立已保存数据的存储库，并通过SVG专题图进行查看".请注意，我已经对其示例进行了一些更改.
It's not originally my code but comes from the UK Office for National Statistics. They provide access to the data from the UK 2011 national census. One access method they provide is through a SOAP API and they give examples of how to consume their API on the page NeSS Data Exchange V2.0. I am having trouble getting one example working. It’s under NDE v2.0 Excel Client in the ZIP NDE Hub Client REST v2.0 (Zip) 37 Mb, a "hub demo Excel-based application which allows the user to build up a repository of saved data, and view it via an SVG thematic map". Note that I have however made some changes to their sample.
以下行将地图<DIV> SVG数据添加到页面:
The map <DIV> SVG data is added to the page by these lines:
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"开始的方式.
The svgFile variable is set to "la_12UB.svg" and that file is present in the 'Boundaries' directory. Here is how 'Boundaries/la_12UB.svg' starts.
<?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代码是
The JavaScript code that puts the SVG from the DOM into 'mapWin' is
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();
}
最后我遇到麻烦的代码是
And finally the code where I'm having trouble is
function initialise() {
var mapWin = svgMapDoc.getElementById('Map');
fullExtent[0] = mapWin.getAttribute('viewBox').split(" ")[0];
推荐答案
如果您没有正确命名SVG文件的名称空间，则ID通常不会按您期望的那样工作.
If you don't namespace the SVG file correctly IDs generally don't work as you expect.
因此，解决方案是将xmlns="http://www.w3.org/2000/svg"属性添加到根<svg>元素中，以及所有其他需要的名称空间声明(例如xlink).
The solution therefore is to add an xmlns="http://www.w3.org/2000/svg" attribute to the root <svg> element together with whatever other namespace declarations such as xlink are required.
这篇关于为什么SVG的getElementById失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
