web-dev-qa-db-ja.com

SVG / XMLにinnerHTMLの置き換えはありますか？

HTMLでは、文字列の形式でテンプレートを提供し、その一部を置き換えてから、innerHTMLを使用してコンテナに割り当てることで簡単なテンプレートシステムを構築できます。

_var templ = '<span>{myText}</span>'
var newContent = templ.replace( '{myText}', someVariable );
document.querySelector( '#myContainer' ).innerHTML = newContent;
_

このようにして、ブラウザーのHTMLパーサーを利用でき、document.createElement()を繰り返し使用する必要がありません。テンプレートがいくつかの要素を超えて大きくなると、後者は非常に面倒になる可能性があります。

ただし、SVGでは、要素にinnerHTMLまたはinnerSVGのようなプロパティはありません。

だから私の質問は：SVG roで使用できるものは上記の例のアプローチに似ていますか、それともdocument.createElement()（またはそれを使用するlib）で立ち往生していますか？

いつものように私の質問：バニラJavaScriptソリューションが好まれますが、ソリューションを提供するlibへのポインターはありがたいです。

javascriptxmltemplatessvg
16
Sirko

DOMParserを使用してXMLを解析できます。 https://developer.mozilla.org/en/Parsing_and_serializing_XML 必要に応じて、importNodeを使用して既存のドキュメントに取り込むことができます。 https： //developer.mozilla.org/en/DOM/document.importNode このような結果になります...

var doc = new DOMParser().parseFromString(
   '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="20"/></svg>',
   'application/xml');

someElement.appendChild(
 someElement.ownerDocument.importNode(doc.documentElement, true));
13
Robert Longson

innerSVG javascriptshimをチェックしてください。必要な機能を提供します。

2014更新：DOM解析仕様 はinnerHTMLとouterHTMLをElement、これらをsvgおよびxml要素で使用できるようにします。これはしばらくの間Blinkで出荷されており、これをサポートする最初のバージョンはChrome 32/Opera 19、詳細は このバグレポート 。

7
Erik Dahlström

ここで私は汚い方法を書きます...

sVGのinnerHTML回避策

http://jsfiddle.net/microbians/8ztNU/

<html>
    <body>
        <svg id="svgcanvas">
        </svg>
        <script>
            var twocircles='<circle cx="253" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle> \
            <circle cx="353" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle>'
            var receptacle = document.createElement('div');
            var svgfragment='<svg>'+twocircles+'</svg>';
            receptacle.innerHTML=''+svgfragment;
            var Nodes=Array.prototype.slice.call(receptacle.childNodes[0].childNodes);
            Nodes.forEach(function(el){document.getElementById('svgcanvas').appendChild(el)})
        </script>
    </body>
</html>

楽しい！

6
microbians

私のinnerSVGシムはどうですか？ CoffeeScriptのソースは以下のとおりです。コンパイルされたJavaScriptは https://Gist.github.com/2648095

# Important: You must serve your pages as XHTML for this shim to work,
# otherwise namespaced attributes and elements will get messed up.
Object.defineProperty SVGElement.prototype, 'innerHTML',
  get: () ->
    $temp = document.createElement 'div'
    $node = @cloneNode true

    for $child in $node.children
      $temp.appendChild $child

    return $temp.innerHTML

  set: (markup) ->
    while @firstChild
      @firstChild.parentNode.removeChild @firstChild

    markup = "<svg id='wrapper' xmlns='http://www.w3.org/2000/svg'>#{markup}</svg>"
    $div = document.createElement 'div'
    $div.innerHTML = markup
    $svg = $div.querySelector 'svg#wrapper'

    for $element in $svg.children
      @appendChild $element 
  enumerable : false  
  configurable : true
4
user1385471

簡単な答えは、「いいえ、XMLの世界には、少しのマークアップを渡して、挿入する場所の適切な名前空間にすべての要素と属性を自動的に作成させる同等のものはありません。」です。

最も近い直接の答えは@Robertが持っているものです。私のコメントに記載されているように、それでも、フラグメントを挿入するドキュメントと同じ名前空間とプレフィックスを持つSVGドキュメント内にスニペットを作成する必要があります。

代わりに、標準のDOMメソッドで便利なメソッドを使用するのが同じくらい簡単（または簡単）であることがわかるかもしれません。

// Create a named SVG element on a node, with attributes and optional text
function appendTo(node,name,attrs,text){
  var p,ns=appendTo.ns,svg=node,doc=node.ownerDocument;
  if (!ns){ // cache namespaces by prefix once
    while (svg&&svg.tagName!='svg') svg=svg.parentNode;
    ns=appendTo.ns={svg:svg.namespaceURI};
    for (var a=svg.attributes,i=a.length;i--;){
      if (a[i].namespaceURI) ns[a[i].localName]=a[i].nodeValue;
    }
  }
  var el = doc.createElementNS(ns.svg,name);
  for (var attr in attrs){
    if (!attrs.hasOwnProperty(attr)) continue;
    if (!(p=attr.split(':'))[1]) el.setAttribute(attr,attrs[attr]);
    else el.setAttributeNS(ns[p[0]]||null,p[1],attrs[attr]);
  }
  if (text) el.appendChild(doc.createTextNode(text));
  return node.appendChild(el);
}

function clear(node){
  while (node.lastChild) node.removeChild(node.lastChild);
}

これを使用すると、次のようなことができます。

var icons={
  Apps  : "/images/apps.png",
  Games : "/images/games.png"
}
var wrap = document.querySelector('#container');
clear(wrap);

for (var label in icons){
  if (!icons.hasOwnProperty(label)) continue;
  var icon = appendTo(wrap,'g',{'class':'icon'});
  appendTo(icon,'image',{'xlink:href':icons[label]});
  appendTo(icon,'text',{x:10,y:20},label);
}

これは、文字列連結を使用して生のSVGマークアップを構築しようとするよりもIMHOクリーンです。

var svg = [];
for (var label in icons){
  if (!icons.hasOwnProperty(label)) continue;
  svg.Push('<g class="icon">');
  svg.Push('<image xlink:href="'+icons[label]+'" />');
  svg.Push('<text x="10" y="20">'+label+'</text>');
  svg.Push('</g>');
}
wrap.innerSVG = svg.join(''); // doesn't work, of course
3
Phrogz

JQueryを使用すると、次のように実行できます。

置換操作後のsvgStringにsvg画像が含まれていると仮定しましょう。

$(svgString)[0]は、文字列に対応するsvgタグを作成します。次に、この要素をdom内の必要な場所に追加して画像を描画できます。

これがお役に立てば幸いです

2
Samuel Rossille

少なくともChromeとSafariでは、SVG要素をHTML要素でラップしてinnerHTMLを要求できます。次のHTMLファイルは、赤い長方形をレンダリングしますが、 SVGソースは緑を指定します。

<body>
<div id="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="120" viewBox="0 0 236 120">
    <rect x="14" y="23" width="250" height="50" fill="green" stroke="black" stroke-width="1" />
  </svg>
</div>
<script>
  var el = document.getElementById('wrapper');
  var t = el.innerHTML;
  t = t.replace(/green/g, "red");
  el.innerHTML = t;
</script>
</body>
1
user1071136

もっと簡単に言えば、document.querySelector('#myContainer').textContent = newContent;はかなり良いサポートを持っています。 IE9 +、Safari、FF、Chromeに。

マイク・ボストックは、これらの種類のものの私のヒーローです： D3.jsソースコード はSVGの質問の私の頼みの綱です。

1
AJFarkas