2

我有一个 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 图像，所有这些都应该在客户端运行，不允许服务器端脚本。

4

3 回答 3

3 
<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中为空），并在声明中使用元素的尺寸。embedembed

于 2012-12-03T10:45:19.640 回答
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 命名空间，这当然是不完整的。

于 2012-12-03T10:58:35.023 回答
0

如果您乐于使用 jQuery，您可能需要查看Keith Wood 的 SVG 插件。我以前用过它，它非常通用。

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

于 2012-12-03T10:20:24.447 回答