javascript 获取 svg-tag 的 innerHTML 结果在 IE 中未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28129956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get innerHTML of svg-tag result in undefined in IE
提问by aventic
I'm having some trouble getting the html content of a svg-tag, with javascript in Internet Explorer.
我在 Internet Explorer 中使用 javascript 获取 svg 标签的 html 内容时遇到了一些麻烦。
My javascript code is as follow:
我的javascript代码如下：
console.log($('.icon')[0].innerHTML);
and my tag in my html document:
以及我的 html 文档中的标签：
<svg class="icon"><use>testing</use></svg>
This works well in Chrome, Firefox and what have we, but in Internet Explorer I'm left with an undefined error. Is it my mixture of Javascript and jQuery?
这在 Chrome、Firefox 和我们有的东西中运行良好，但在 Internet Explorer 中我留下了一个未定义的错误。它是我的 Javascript 和 jQuery 的混合体吗？
How come I can't seem to fetch the content of my svg-tag? I've tried some different things and often I end up with an "SCRIPT5007: Unable to set property 'innerHTML' of undefined or null reference"
为什么我似乎无法获取我的 svg-tag 的内容？我尝试了一些不同的东西，但经常以“SCRIPT5007：无法设置未定义或空引用的属性‘innerHTML’”而告终
Help me :) thanks in regards!
帮帮我:) 谢谢！
采纳答案by aventic
Eventually I found some sort of solution to this. A hacky way perhaps? But works for me atleast.
最终我找到了某种解决方案。也许是一种hacky方式？但至少对我有用。
Instead of getting the raw innerhtml which I can't in IE. I try to get each element-node inside my svg-tag by doing so:
而不是获取我在 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]);
}
}
回答by Robert Longson
How about using XMLSerializer. Get yourself the element somehow and then do this...
如何使用XMLSerializer。以某种方式让自己获得元素，然后执行此操作...
console.log(new XMLSerializer().serializeToString(element));
回答by Sampson
Internet Explorer doesn't currently support the innerHTMLmethod on SVG Elements. We do however have an issue opened internally to track our consideration of this feature. In the meantime I would explore alternative solutions like the InnerSVG polyfillwhich allegedly works in Internet Explorer 9 and newer.
Internet Explorer 当前不支持innerHTMLSVG Elements 上的方法。但是，我们确实在内部打开了一个问题来跟踪我们对此功能的考虑。与此同时，我会探索替代解决方案，比如据称可以在 Internet Explorer 9 和更新版本中使用的InnerSVG polyfill。
回答by jantimon
The following code will give you the content as string from the given SVG. It is based on the great answer of Robert Longson.
以下代码将为您提供来自给定 SVG 的字符串形式的内容。它基于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('');
回答by PC100-Fan
console.log($('.icon').parent().html());works fine for me in IE11.
console.log($('.icon').parent().html());在 IE11 中对我来说很好用。
The delivered string starts with a XML declaration
<?xml version="1.0" encoding="iso-8859-1" ?>which seems to be handled as the parent of the svg node.
传递的字符串以 XML 声明开头，该声明
<?xml version="1.0" encoding="iso-8859-1" ?>似乎作为 svg 节点的父节点进行处理。
回答by RunningEgg
(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();
}
}
})
})();
set html use:
设置 html 使用：
$(svg).html()
test on IE11
在 IE11 上测试
回答by Ibrahim Benzer
As a workaround, you can append the SVG element to a temporary DIV, take the inner html of that DIV and remove the SVG opening and closing tag from that string.
作为一种解决方法，您可以将 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>回答by u10749067
You can create your own innerHTML, like the following setSVG： enter image description here
你可以创建自己的innerHTML，像下面这样setSVG： 在此处输入图片描述
In fact, you only need to pay attention to two steps: creating the SVG context label and setting properties (with context)
其实只需要注意两步：创建SVG上下文标签和设置属性（带上下文）
createElementNS and setAttributeNS are two methods you may need！
createElementNS 和 setAttributeNS 是你可能需要的两个方法！
Common namespaces are as follows:
常见的命名空间如下：
回答by Tom Roggero
For actual tags inner content, you can use the following:
对于实际的标签内部内容，您可以使用以下内容：
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, '')
}
For text only inner content, use node.textContentinstead.
对于纯文本内部内容，请node.textContent改用。
