如何在HTML頁面中加載SVG節點？

我有一個HTML5頁面和多個聲明SVG圖像的節點（元素）的文件。該文件是這樣的：如何在HTML頁面中加載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圖像，所有文件都應該在客戶端運行，不允許使用服務器端腳本。

來源

2012-12-03 StaticBug

<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元素的尺寸。

來源

2012-12-03 10:45:19 PhiLho

這當然是一個很好的解決方案，顯然它解決了我看到的命名空間問題！ –

嗯，我正在使用Chrome版本進行測試。 23，並且當broswer試圖執行xmlHTTP.send（）時，我得到「只支持HTTP的交叉源請求」。在函數fixSVG（）中，可能是如果我建立一個服務器，這將被解決......但是有沒有一個完全基於客戶端的解決方案？ – StaticBug

是的，Chrome不想用file：protocol做XHR，我看到了同樣的問題，一旦我運行服務器並使用localhost，問題就沒有了。 Firefox並不是那麼挑剔......我不明白「完全基於客戶端的」問題，它已經全部是「基於客戶端的」，即。它不涉及服務器端腳本，只使用服務器來...提供文件。 – PhiLho

如果你很樂意使用jQuery，你可能想看看Keith Wood's SVG plugin。我之前使用過它，它非常靈活。

如果您查看文檔頁面上的「加載」選項卡，它將介紹如何加載外部文件並將其添加到現有的SVG。

來源

2012-12-03 10:20:24 FixMaker

主要的問題似乎是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-03 10:58:35

如何在HTML頁面中加載SVG節點？

回答

相關問題