3

我有内联 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" >

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

编辑：：

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

顺便说一句：getElementsByTagName()有效。

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

这真的很奇怪，这可能是什么原因造成的？

4

1 回答 1

0

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

因此，在使用新创建的 SVG 中的 ID 对元素调用 document.getElementById() 之前，我们必须通过将整个 SVG 附加到 document.body 或其中的其他容器来将整个 SVG 添加到 DOM。然后它工作。

于 2017-03-09T00:09:33.910 回答