web-dev-qa-db-ja.com

IE）で未定義のsvg-tag結果のinnerHTMLを取得します

Internet Explorerでjavascriptを使用して、svg-tagのhtmlコンテンツを取得するのに問題があります。

私のJavaScriptコードは次のとおりです。

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

と私のhtmlドキュメントの私のタグ：

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

これはChrome、Firefoxなどでうまく機能しますが、InternetExplorerでは未定義のエラーが残ります。それはJavascriptとjQueryの私の混合物ですか？

Svg-tagのコンテンツを取得できないように見えるのはなぜですか？いくつかの異なることを試しましたが、「SCRIPT5007：未定義またはnull参照のプロパティ 'innerHTML'を設定できません」という結果になることがよくあります。

私を助けてください:)よろしくお願いします！

javascriptjqueryinternet-explorersvg
16
aventic

最終的に私はこれに対するある種の解決策を見つけました。おそらくハッキーな方法ですか？しかし、少なくとも私にとってはうまくいきます。

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]);
    }
}
2
aventic

XMLSerializer を使用するのはどうですか。どういうわけかあなた自身に要素を手に入れて、それからこれをしてください...

console.log(new XMLSerializer().serializeToString(element));
17
Robert Longson

Internet Explorerは現在、SVG要素でinnerHTMLメソッドをサポートしていません。ただし、この機能の検討を追跡するために、社内で問題が発生しています。それまでの間、Internet Explorer 9以降で機能するとされる InnerSVG polyfill のような代替ソリューションを検討します。

15
Sampson

次のコードは、指定された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('');
3
jantimon

console.log($('.icon').parent().html());は、IE11では正常に機能します。

配信される文字列は、svgノードの親として処理されているように見えるXML宣言<?xml version="1.0" encoding="iso-8859-1" ?>で始まります。

1
PC100-Fan
(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でテスト

1
RunningEgg

実際のタグの内部コンテンツには、次を使用できます。

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を使用してください。

0
Tom Roggero

次のように、独自のinnerHTMLを作成できます setSVG ： ここに画像の説明を入力してください

実際、注意を払う必要があるのは、SVGコンテキストラベルの作成とプロパティの設定（コンテキスト付き）の2つのステップだけです。

createElementNSとsetAttributeNSは、必要になる可能性のある2つのメソッドです。

一般的な名前空間は次のとおりです。

0
井上心叶

回避策として、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>
0
Ibrahim Benzer