XML样式信息

Question

我正在尝试使用一些简单的代码学习XML。在Web浏览器中打开代码时，会显示一条消息：

  

此XML文件似乎没有与之关联的任何样式信息。文档树如下所示。

在上述消息之后，将显示XML。

此警告信息的含义是什么，我该如何解决？

Answer 1

您可以将xml粘贴到此xml验证程序中。它还提供了一些有用的信息来帮助您。

https://www.w3schools.com/xml/xml_validator.asp

Answer 2

xml和svg命名空间错误

原因是未为SVG文件设置正确的命名空间，因此浏览器无法正确渲染该文件进行预览，仅显示XML树。

我的解决方案

您只需要在预览之前手动添加SVG名称空间，就这么简单！

   const svgAutoConvert = (svgStr = ``) => {
      // set svg namespace
      const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
      const xml = /<\?xml[\s\S]*\?>/i;
      let result = ``;
      result = svgStr.replace(xml,``);
      let index = result.indexOf(`>`);
      // get the svg string, after remove error part
      result = result.substr(index + 1);
      result = viewport + result;
      // add xml namespace(not add below line, it's also OK)
      result = `<?xml version="1.0" encoding="UTF-8"?>\n` + result;
      return result;
    };

演示

const log = console.log;

const box = document.querySelector(`[id="svg-box"]`);

const svgStr = box.innerHTML;

log(`svgStr \n`, svgStr);

const svgAutoConvert = (svgStr = ``) => {
  // set svg namespace
  const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
  const xml = /<\?xml[\s\S]*\?>/i;
  let result = ``;
  result = svgStr.replace(xml,``);
  let index = result.indexOf(`>`);
  // get the svg string, after remove error part
  result = result.substr(index + 1);
  result = viewport + result;
  // add xml namespace(not add below line, it's also OK)
  result = `<?xml version="1.0" encoding="UTF-8"?>\n` + result;
  return result;
};

const svgStrWithNamespace = svgAutoConvert(svgStr);
log(`svgStrWithNamespace \n`, svgStrWithNamespace);

<div id="svg-box">
  <svg width="187px" height="141px" viewBox="0 0 187 141" version="1.1">
      <polygon points="93.5 2 182.423784 52.4417594 148.457921 134.058241 38.5420789 134.058241 4.57621573 52.4417594"></polygon>
  </svg>
</div>

比较

https://cdn.xgqfrms.xyz/svg/namespace/poly.svg

https://cdn.xgqfrms.xyz/svg/namespace/poly-bug.svg