Может ли getElementByID отказаться от документов SVG?

Я пытаюсь заработать некоторый JavaScript, манипулируя документами SVG. У меня есть следующий код:Может ли getElementByID отказаться от документов SVG?

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">  
    <rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/> 
    <rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue"> 
     <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/> 
    </rect> 
</svg>

И пытается создать простое предупреждение, когда щелкнул элемент внутри SVG документ:

$(document).ready(function() { 
    'use strict'; 

    var img = document.getElementById("spikeroad"); 
     console.log(img); 
    var delta = img.getElementById("outerrect"); 
     delta.addEventListener("click", function() { 
      alert('Delta clicked'); 
     }, false); 
});

Сценарий может найти IMG достаточно хорошо, но затем не в состоянии прикрепите оповещение к изображению, когда он щелкнут. Я надеюсь, что смогу динамически привязать события анимации к объектам с использованием JavaScript, но мне нужно сначала разобраться, как их идентифицировать.

все это сидит в этом HTML:

<html> 
    <head> 
     <title>My Title</title> 
     <meta charset="utf-8"> 
     <script defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
     <script defer="defer" src="controls.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <img id="spikeroad" src="map.svg" alt="loadbarspike"/> 
    </body> 
</html>

источник

2013-05-30 Hyposaurus

outerrect находится внутри SVG документа. Ведение журнала показывает, что это значение равно null при вызове document.getElementByID – Hyposaurus

Пожалуйста, смотрите это - http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript – lifetimes

Я думаю, вы должны положить JavaScript в SVG документа. img.getElementById также не является функцией. getElementById работает только с документом.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading"> 

<script> 
    window.onload = function() { 
    var delta = document.getElementById("outerrect"); 
    delta.addEventListener("click", function() { 
      alert('Delta clicked'); 
    }, false); 
    }; 
</script>  
<rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/> 
<rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue"> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/> 
</rect>

источник

2013-05-30 08:01:16 yavuzkavus

Firsty вы не можете это сделать, если вы используете <img> элемент, поскольку они не могут манипулировать с помощью JavaScript. Поменяйте это на элемент <object>.

Затем вам нужен документ для вызова getElementById, вы можете получить этот документ, встроенный в тег <object>, вызывая contentDocument на элементе <object>. Если вы нацеливаете устаревший плагин Adobe для IE < 9, то он не поддерживает contentDocument, и вместо этого вы должны вызвать getSVGDocument(). Это дает нам что-то вроде этого ...

function init() { 
    'use strict'; 

    var img = document.getElementById("spikeroad"); 
    console.log(img); 

    var svgdoc; 
    if (object && object.contentDocument) 
     svgdoc = object.contentDocument; 
    else try { 
     svgdoc = object.getSVGDocument(); 
    } 

    var delta = svgdoc.getElementById("outerrect"); 
    delta.addEventListener("click", function() { 
     alert('Delta clicked'); 
    }, false); 
});

Затем в теле тега написать

<body onload="init()">

источник

2013-05-30 08:57:15

Может ли getElementByID отказаться от документов SVG?

ответ

Смежные вопросы