SVG에서 getElementById가 실패하는 이유는 무엇입니까?

나는SVG에서 getElementById가 실패하는 이유는 무엇입니까?

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를 사용하는 방법에 대한 예제를 제공합니다. 하나의 예제가 작동하는 데 문제가 있습니다. ZIP NDE Hub Client REST v2.0 (Zip) 37 Mb에있는 NDE v2.0 Excel Client은 "저장된 데 이터베이스를 작성하고 SVG 주제 맵을 통해 볼 수있는 허브 데모 Excel 기반 응용 프로그램"입니다. 그러나 나는 made some changes to their sample을 가지고있다.

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"로 설정되고 해당 파일은 '경계'디렉토리에 존재 :

지도 <DIV> 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"/>

'mapWin'로 DOM에서 SVG를두고 자바 스크립트 코드는

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

게시 하시길 바랍니다. –

일부 코드 조각이 추가되었습니다. 그것은 많은 파일로 만들어졌지만 잘하면 충분히 포함 시켰습니다. @RobertLongson - 네임 스페이스가 설정되지 않았 음을 알 수있는 SVG 파일의 처음 몇 줄을 포함 시켰습니다. 그게 문제 야? – dumbledad

@RobertLongson, 당신은 스타입니다. Jonathan Watt의 [SVG Authoring Guidelines] (https://jwatt.org/svg/authoring/#namespace-binding)의 네임 스페이스 권장 사항에 따라 DOCTYPE 항목을 제거하고 SVG 및 XLink 네임 스페이스를 루트 SVG 요소에 추가했습니다. 이제 작동합니다! 답변으로 의견을 기재 할 시간이 있다면 나는 그 것처럼 표시 할 것입니다. – dumbledad

SVG 파일의 네임 스페이스를 올바르게 지정하지 않으면 일반적으로 ID가 예상대로 작동하지 않습니다.

따라서 솔루션은 <svg> 요소에 xlink와 같은 다른 네임 스페이스 선언이 필요한 경우 xmlns="http://www.w3.org/2000/svg" 특성을 추가해야합니다.

출처

2013-05-15 15:22:39

입니다 EMBED 때문에 내장 된 ID를 볼 수 없습니다. embed을 외부 프로세스가 렌더링하는 페이지의 구멍으로 생각하십시오. 브라우저의 뷰에서 내용은 완전히 불투명합니다. 일반적으로 브라우저 플러그인이 지원하는 비디오 또는 이상한 이미지 형식에 사용됩니다. 브라우저는 해당 요소 내부에 무엇이 있을지 아무런 가정을하지 않습니다.

은이 충고 다음 가능 :

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

가없이, 그냥이 일어나는 사용자 정의 요소가 될 수있다 : 요소의 네임 스페이스가 올 때 How do you access the contents of an SVG file in an <img> element?

하지만이 유일한 작품 브라우저가 만지지 않는 이름은 svg입니다.

자세한 내용은 SVG in HTML을 참조하십시오.

출처

2013-05-15 15:17:22

흥미로운 것 같습니다. 하지만 나는 페이지의 DOM에서'getElementById'를 호출하지 않고'getSVGDocument' 결과로 호출했습니다. 반드시 작동해야합니까? (사실, @ RobertLongson의 코멘트에 따라 SVG 파일에 네임 스페이스를 추가했습니다. 작동하지 않습니다. – dumbledad

정말'embed'가 ID를 노출하는 것을 기대하지 않지만 다음과 같이 할 수 있습니다. http : // stackoverflow. com/questions/8496241/how-to-access-the-embed-tag-in-html –

SVG에서 getElementById가 실패하는 이유는 무엇입니까?

답변

관련 문제