获取 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：无法设置未定义或空引用的属性‘innerHTML’”

帮帮我:)谢谢！

Answer 1

如何使用XMLSerializer。以某种方式获取元素，然后执行此操作...

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

Answer 2

Internet Explorer 当前不支持 SVG 元素上的 innerHTML 方法。但是，我们确实在内部打开了一个问题，以跟踪我们对该功能的考虑。与此同时，我将探索其他解决方案，例如 InnerSVG polyfill，据称它适用于 Internet Explorer 9 及更高版本。

Answer 3

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

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

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

Answer 4

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

而不是获取我在 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 5

console.log($('.icon').parent().html()); 在 IE11 中适合我。

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

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

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

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]+)[^>]+>(.*)(<\/\1>)/i, '$2')
}

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

Answer 9

您可以创建自己的innerHTML，如下setSVG： enter image description here

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

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/