Internet Explorer XML / SVG自定义命名空间 - 生成额外/错误的命名空间 [英] Internet Explorer XML/SVG Custom Namespacing - Extra/Wrong Namespaces Generated

问题描述

我正在尝试在网页内呈现SVG文档，然后通过JavaScript捕获该SVG文档的标记。然后将此SVG标记发送回服务器进行处理。

I am trying to render an SVG document inside of a webpage, and then capture the markup of that SVG document via JavaScript. This SVG markup is then sent back to the server for processing.

我的SVG文档的根类似于以下内容：

The root of my SVG document is similar to the following:

<svg id="layout" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:foobar="http://www.foobar.com" foobar:attribute="123abc">

这在Webkit和Firefox中运行得非常好，但是Internet Explorer（像往常一样）导致了问题。当SVG在IE中呈现时，它看起来很好，但是当我通过JavaScript / jQuery（XMLSerializer）获得它的标记时，SVG字符串根节点现在看起来像这样：

This is working perfectly fine in Webkit and Firefox, but Internet Explorer (as usual) is causing problems. When the SVG gets rendered in IE, it looks fine, but when I get its markup via JavaScript/jQuery (XMLSerializer), the SVG strings root node now looks like this:

<svg xmlns="http://www.w3.org/2000/svg" id="layout" xmlns:NS1="" NS1:foobar:attribute="123abc" xmlns:NS2="" NS2:xmlns:foobar="http://www.foobar.com">

SVG显示正常，但正如您所看到的，命名空间混乱（并且当XML被序列化时，属性已被重新排列，但这并不是真正的问题。这些混乱的命名空间会破坏处理提交的SVG字符串的服务器端代码。任何人都可以了解正在发生的事情吗？

The SVG gets displayed properly, but, as you can see, the namespacing is messed up (and the attributes have been rearranged, but that's not really a concern) when the XML gets serialized. These messed up namespaces break the server-side code that processes the submitted SVG strings. Anyone able to shed some light on what is going on?

我已经做了一个下午的谷歌搜索，似乎无法想出很多。我见过的所有例子都是人们试图通过JavaScript / jQuery添加命名空间并获得类似的结果（命名空间）到我所看到的情况。

I've done an afternoon of Googling, and can't seem to come up with a whole lot. All of the examples that I've seen are of people trying to add namespaces via JavaScript/jQuery and getting similar results (namespace-wise) to what I'm seeing happen.

希望有人在MSDN上知道发生了什么，我还打开了一个帖子那里。

In hopes that someone over on MSDN knows what's going on, I've also opened a thread there.

编辑：添加了一些细节

编辑2：添加到MSDN线程的链接

推荐答案

如果您可以让XMLSerializer始终如一地为您服务，那绝对是您的选择。我以前遇到过这个问题并且它正在发生，因为我使用jQuery将SVG内容添加到页面中。当我从字符串中读取内容时，我确保使用新的DOMParser（）。parseFromString（content，'text / xml'），从而摆脱它使用标准的appendChild方法添加内容。

If you can get XMLSerializer working consistently for you, that's definitely the way to go. I had been hitting this issue previously and it was happening because I was using jQuery to add SVG content to the page. I was able to get rid of it by making sure I used new DOMParser().parseFromString(content, 'text/xml') when I was reading content from a string and using the standard appendChild method to add the content.

但是，我发现在几种不同的浏览器实现中存在怪癖，特别是在较旧的IE和Safari版本中，如果您拥有自定义命名空间的内容，则可能会让您感到痛苦。如果你不做正确的事情，名称空间会被剥夺或破坏，就像你看到的那样。

However, I've found that there are quirks in several different browser implementations, particularly in older IE and Safari versions, that can make it a pain to work with if you have content with custom namespaces. If you don't do things just right, namespaces will get stripped or mangled, like you're seeing.

我终于放弃并写了一个简单的自己应该在所有浏览器中正确处理命名空间。 YMMV，但它与我使用的内容非常有效。

I finally gave up and wrote a simple one myself that should handle namespaces correctly across all browsers. YMMV, but it worked pretty effectively with the content I was using.

function serializeSvgContent(element) {
  var result = '<' + element.nodeName;

  // add in the element's attributes
  for (var i = 0; i < element.attributes.length; i++) {
    var attribute = element.attributes[i];
    var name = attribute.name || attribute.nodeName;
    var value = (attribute.value || attribute.nodeValue).replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&apos;');
    result += ' ' + name + '="' + value + '"';
  }

  if (element.childNodes.length > 0) {
    result += '>';

    // recursively add any child elements
    for (i = 0; i < element.childNodes.length; i++) {
      var child = element.childNodes[i];
      if (child.nodeType === 1) {
        result += serializeSvgContent(child);
      }
    }
    result += '</' + element.nodeName + '>';

  } else {
    result += '/>';
  }
  return result;
}

这篇关于Internet Explorer XML / SVG自定义命名空间 - 生成额外/错误的命名空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！