Question

我有内联svg并希望通过以下方式获取此元素：

svgdoc.getElementById( 'someid' );

适用于Firefox，Chrome，但不适用于Opera。结果是null。页面（html5）以xhtml（content-type：application / xhtml + xml）的形式传递，html根元素包含在inline-svg（svg，inkscape，...）中出现的所有命名空间声明。使用inkscape创建并直接注入源。

所以，html元素看起来像这样：

<!DOCTYPE html>
<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">

并且包含的svg的头部看起来像这样：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="581.75085"
   height="382"
   inkscape:version="0.48.3.1 r9886" >

html-source中删除了<?xml ... ?>声明。

EDIT ::

上面的解释中有一点错误...... SVG注入到ajax响应的源中，而后者又通过element.innerHTML注入到dom中。请原谅这个失败！

btw：getElementsByTagName()有效。

console.log( svgdoc.getElementByID ) --> function getElementById(){ [native code] }

这真的很奇怪，是什么导致这个？

Answer 1

我不确定这是否仍然与这个问题相关但我最近发现如果要获取的元素是SVG子元素并且SVG还不是DOM的子代，则Opera 12不能getElementById（）。

因此，在具有ID的元素上调用document.getElementById（）之前，我必须通过将整个SVG附加到document.body或其他容器中来将整个SVG添加到DOM中。然后就行了。

内联svg - getElementById在Opera中不起作用

1 个答案: