Question

我有一个HTML5页面和多个文件，用于声明SVG图像的节点（元素）。文件如下所示：

<g class="background">
    <g class="bg_path_a">
        <path d="M0 40 L21 40" />
    </g>
    <g class="bg_path_b">
        <path d="M42 21 L63 0 100 0 M23 40 L48 15" />
    </g>
    <g class="bg_path_c">
        <path d="M53 40 L100 40 M21 40 L53 40" />
    </g>
    <g class="bg_lockpath">
        <path d="M21 40 L33 40" />
    </g>
    <g class="bg_label">
        <rect x="0" y="20" width="10" height="10" />
    </g>
</g>

没有xmlns，声明了DTD，它们应该保持不变。现在我希望能够加载这些文件，但在HTML5页面中将它们显示为SVG图像，所有文件都应在客户端运行，不允许服务器端脚本。

Answer 1

<script>
function createXMLHttpRequest()
{
  if (window.XMLHttpRequest) // Firefox and others
  {
   return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) // Internet Explorer
  {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  else
  {
    alert("XMLHttpRequest not supported");
    return null;
  }
}

function fixSVG()
{
    var svgElement, xmlHTTP, svgDoc
    xmlHTTP = createXMLHttpRequest();
    xmlHTTP.open("GET", "BadSVG.svg", false);
    xmlHTTP.send();
    svgDoc = xmlHTTP.responseText;
    svgElement = document.getElementById("yuck");
    svgElement.outerHTML = "<svg xmlns='http://www.w3.org/2000/svg'" +
            " width='" + svgElement.width + 
            "' height='" + svgElement.height + "'>" +
            svgDoc + "</svg>";
}
</script>
[...]
<body onLoad="fixSVG()">
[...]
<embed id="yuck" src="" type="image/svg+xml"
    width="500" height="500" wmode="transparent"/>

仅在Firefox中测试...

如果你的文件很小，文件的同步加载应该不是问题，如你所示。

[编辑]稍有改进：避免加载文件两次（src标记中为空embed），并使用声明中embed元素的维度。

Answer 2

主要问题似乎是将SVG片段放入SVG名称空间。您可以使用XSLT“完成”SVG（添加周围的svg元素）并将所有内容放在正确的命名空间中：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/2000/svg" version="1.0">

  <!-- The dimension can be supplied using a parameter.
       This defaults to 100%. -->
  <xsl:param name="width"  select="'100%'"/>
  <xsl:param name="height" select="'100%'"/>

  <xsl:template match="/">
    <svg version="1.1" width="{$width}" height="{$height}">
      <xsl:apply-templates/>
    </svg>
  </xsl:template>

  <xsl:template match="*">
    <xsl:element name="{local-name()}" namespace="http://www.w3.org/2000/svg">
      <xsl:apply-templates select="node()|@*"/>
    </xsl:element>
  </xsl:template>

  <xsl:template match="@*|text()">
    <xsl:copy-of select="."/>
  </xsl:template>
</xsl:stylesheet>

您必须使用AJAX

加载样式表和SVG代码段

使用AJAX获取SVG代码段，例如：

var loadXML = function(fileName,mime) {
  xmlHttpRequest = new XMLHttpRequest()
  xmlHttpRequest.open("GET",fileName,false);
  xmlHttpRequest.send("");
  return xmlHttpRequest.responseXML;
}
var svgSnippet = loadXML(snippetURL,"image/svg+xml")
var xslt = loadXML(xsltURL,"application/xslt+xml")
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
// You can override the default width/height parameters here
xsltProcessor.setParameter(null,"width","150px")
xsltProcessor.setParameter(null,"width","90px")
// In the document there must be some element to append the SVG
documentGetElementById("svgContainer").appendChild(xsltProcessor.transformToFragment(svgSnippet,document).firstChild)

这都是未经测试的，但也许可以从一开始。如果您还需要XLink名称空间，那么无论如何这当然都是不完整的。

Answer 3

如果您乐意使用jQuery，可能需要查看Keith Wood's SVG plugin。我之前用过它，而且用途非常广泛。

如果您查看文档页面上的“加载”选项卡，它将介绍如何加载外部文件并将其添加到现有SVG中。

如何在HTML页面中加载SVG节点？

3 个答案: