Подтвердить что ты не робот

Есть ли замена innerHTML в SVG/XML?

В 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, предоставляющий решение, оценен.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать 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));

Ответ 2

Проверьте innerSVG javascript shim, он предоставляет нужные функции.

Обновление 2014: спецификация разбора DOM определяет innerHTML и outerHTML на Element, что делает их доступными для элементов svg и xml. Это была отправка в Blink некоторое время, первые версии для поддержки этого были Chrome 32/Opera 19, более подробную информацию можно найти в этот отчет об ошибках.

Ответ 3

Как насчет моей внутренней подставки? Источник 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

Здесь я пишу грязный способ...

innerHTML обходной путь для SVG

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>

Наслаждайтесь!

Ответ 5

Короткий ответ: "Нет, нет эквивалента в мире 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);
}

Это IMHO чище, чем пытаться построить необработанную разметку SVG с помощью конкатенации строк:

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

Ответ 6

С помощью jQuery вы можете сделать это следующим образом:

Предположим, что ваш svgString содержит ваше изображение svg после операций замены.

$(svgString)[0], чтобы создать тэг svg, соответствующий вашей строке. Затем вы можете добавить этот элемент, в котором вы хотите, чтобы изображение отображалось в dom.

Я надеюсь, что это поможет

Ответ 7

Похоже, что в 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>

Ответ 8

Проще говоря, document.querySelector('#myContainer').textContent = newContent; имеет довольно хорошую поддержку, def. к IE9 +, Safari, FF, Chrome.

Майк Босток мой герой для таких вещей: исходный код D3.js - это мой вопрос по SVG.