如何在HTML页面中加载SVG节点？
我有一个HTML5页面和多个声明SVG Image节点(元素)的文件。这些文件如下所示：
<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图像，所有这些都应该在客户端运行，不允许服务器端脚本。
回答 3
Stack Overflow用户
发布于 2012-12-03 18:45:20
<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中测试...
如您所示，如果您的文件很小，那么文件的同步加载应该不是问题。
编辑小改进:避免两次加载文件( embed标记中的空src )，并在声明中使用embed元素的尺寸。
Stack Overflow用户
发布于 2012-12-03 18:58:35
主要问题似乎是将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名称空间，那么无论如何这都是不完整的。
Stack Overflow用户
发布于 2012-12-03 18:20:24
如果你喜欢使用jQuery，你可能想看看Keith Wood's SVG plugin。我以前用过它，它的用途非常广泛。
如果您查看文档页面上的" load“选项卡，它描述了如何加载外部文件并将其添加到现有SVG中。
https://stackoverflow.com/questions/13680976
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号