获取 svg-tag 的 innerHTML 结果在 IE 中未定义

Question

我在 Internet Explorer 中使用 javascript 获取 svg 标签的 html 内容时遇到一些问题。

我的javascript代码如下：

console.log($('.icon')[0].innerHTML);

我的 html 文档中的标签：

<svg class="icon"><use>testing</use></svg>

这在 Chrome、Firefox 和我们拥有的产品中运行良好，但在 Internet Explorer 中我留下了一个未定义的错误。是我的 Javascript 和 jQuery 的混合吗？

为什么我似乎无法获取我的 svg-tag 的内容？我尝试了一些不同的东西，但经常以 "SCRIPT5007: Unable to set property 'innerHTML' of undefined or null reference"

结束

帮帮我 :) 谢谢！

Answer 1

Internet Explorer 当前不支持 SVG 元素上的 innerHTML 方法。但是，我们确实在内部打开了一个问题来跟踪我们对该功能的考虑。与此同时，我会探索替代解决方案，例如据称在 Internet Explorer 9 和更新版本中有效的 InnerSVG polyfill。

Answer 2

最终我找到了某种解决方案。也许是一种骇人听闻的方式？但至少对我有用。

而不是获取我在 IE 中无法获取的原始 innerhtml。我尝试通过这样做让我的 svg-tag 中的每个元素节点：

var element = document.getElementsByTagName('svg')[0].childNodes;
for (i = 0; i < element.length; i++) {
    if (element[i].nodeName != '#text') {
        console.log(element[i]);
    }
}

Answer 3

使用 XMLSerializer 怎么样？以某种方式获取元素，然后执行此操作...

console.log(new XMLSerializer().serializeToString(element));

Answer 4

console.log($('.icon').parent().html()); 在 IE11 中对我来说很好用。

传递的字符串以 XML 声明开头 <?xml version="1.0" encoding="iso-8859-1" ?> 这似乎是作为 svg 节点的父节点处理的。

Answer 5

以下代码将为您提供来自给定 SVG 的字符串形式的内容。它基于 .

const svgNode = document.getElementsByTagName('svg')[0];
const serializer = new XMLSerializer();

const svgContent = Array.prototype.map.call(
  svgNode.childNodes, 
  (child) => serializer.serializeToString(child)
).join('');

Answer 6

(function () {
    var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
    if(typeof svg["innerHTML"] !== "undefined") {
        return;
    }

    var node = $('<script type="text/svg_template"></script>');

    Object.defineProperty(SVGElement.prototype, 'innerHTML', {
        get: function() {           
            try {
                var childNode = this.firstChild;
                while (childNode) {
                    node.append($.clone(childNode));
                    childNode = childNode.nextSibling;
                }
                return node.html();
            } finally {
                node.empty();
            }
        }
    })
})();

设置html使用：

$(svg).html()

在 IE11 上测试

Answer 7

作为解决方法，您可以将 SVG 元素附加到临时 DIV，获取 DIV 的内部 html 并从该字符串中删除 SVG 开始和结束标记.

let parentHtml = $('<div />').append($('svg')).html();
let svgInner = parentHtml.replace(/(<svg)([^<]*|[^>]*)/g, '').replace('</svg>', '');
alert(svgInner);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

Answer 8

你可以创建自己的innerHTML，像下面这样setSVG： enter image description here

其实只需要注意两步：创建SVG上下文标签和设置属性（with context）

createElementNS 和 setAttributeNS 是您可能需要的两个方法！

常用命名空间如下：

svg:http://www.w3.org/2000/svg
xhtml:http://www.w3.org/1999/xhtml
xlink:http://www.w3.org/1999/xlink
xml:http://www.w3.org/XML/1998/namespace
xmlns:http://www.w3.org/2000/xmlns/

Answer 9

对于实际标签的内部内容，您可以使用以下内容：

function innerHTML(anySvgElement) {
  var d = document.createElement('div');
  d.appendChild(anySvgElement);
  // Given all SVG tags contain only letters and no numbers, we can strip out the outer tag (the anySvgElement itself)
  return d.innerHTML.replace(/<([a-z]+)[^>]+>(.*)(<\/>)/i, '')
}

对于纯文本的内部内容，请改用 node.textContent。

获取 svg-tag 的 innerHTML 结果在 IE 中未定义

Get innerHTML of svg-tag result in undefined in IE

javascript

jquery

internet-explorer

svg