浏览嵌套SVG：使用仅在Firefox

预计这里是保存在同一文件夹3种SVG格式：浏览嵌套SVG：使用仅在Firefox

black_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="black"> 
    <rect x="10" y="10" width="10" height="10" fill="black" /> 
    </g> 
</svg>

green_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="green"> 
    <rect x="5" y="5" width="20" height="20" fill="green" /> 
    <use xlink:href="black_rectangle.svg#black" /> 
    </g> 
</svg>

red_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="red"> 
    <rect x="0" y="0" width="30" height="30" fill="red" /> 
    <use xlink:href="green_rectangle.svg#green" /> 
    </g> 
</svg>

边缘，Chrome和勇敢的本地主机上浏览red_rectangle.svg时不显示黑色矩形。 Firefox。

在从jscher2000指导另一个话题，我想在HTML5文件中显示red_rectangle.svg：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
<img src="red_rectangle.svg" /> 
</body> 
</html>

结论：所有的浏览器只显示红色矩形，没有绿色或黑色的..

有人知道任何解决办法吗？谢谢

我再次：它看起来是一个黑洞..然后我决定不同地解决问题。这是一个将一组svg转换为一个的XSL样式表。不确定它涵盖了所有情况......但它解决了我的问题。

<?xml version="1.0"?> 
<xsl:stylesheet version="1.0" 
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       xmlns:svg="http://www.w3.org/2000/svg" 
       xmlns:exsl="http://exslt.org/common" 
       exclude-result-prefixes="svg exsl"> 

    <xsl:output method="xml" indent="yes" encoding="UTF-8" /> 

<!-- 
    Path to manage relative folders containing xsl and svg 
    xsl stored in Folder/xsl 
    svg stored in Folder/img 
    relativePath = '../img/' 
--> 
    <xsl:param name="relativePath" /> 

    <xsl:template match="@*|node()" > 
    <xsl:copy> 
     <xsl:apply-templates select="@*|node()"/> 
    </xsl:copy> 
    </xsl:template> 

    <xsl:template match="svg:defs"> 
    <svg:defs> 
    <!-- Copy current children --> 
     <xsl:apply-templates select="child::*"/> 
    <!-- 
     Scan all included documents recursively 
     Store them in a list (XML document) 
    --> 
     <xsl:variable name="useElement"> 
     <svg:useElement> 
      <xsl:apply-templates select="//svg:use" mode="docs"/> 
     </svg:useElement> 
     </xsl:variable> 

    <!-- Temporary list with name of referenced documens WITH duplicates --> 
     <xsl:variable name="useDocument"> 
     <svg:useDocument> 
      <xsl:for-each select="exsl:node-set($useElement)//svg:useElement/svg:useItem[not(.=preceding::*)]"> 
      <svg:useItem> 
       <xsl:value-of select="substring-before(current(), '#')" /> 
      </svg:useItem> 
      </xsl:for-each> 
     </svg:useDocument> 
     </xsl:variable> 

    <!-- Copy the elements svg:defs of those referenced documents --> 
     <xsl:for-each select="exsl:node-set($useDocument)//svg:useDocument/svg:useItem[not(.=preceding::*)]"> 
     <xsl:copy-of select="document(concat($relativePath, current()))//svg:defs/*" /> 
     </xsl:for-each> 

    <!-- Copy the referenced elements --> 
     <xsl:for-each select="exsl:node-set($useElement)//svg:useElement/svg:useItem[not(.=preceding::*)]"> 
     <xsl:apply-templates select="document(concat($relativePath, substring-before(current(), '#')))//*[ @id = substring-after(current(), '#') ]" /> 
     </xsl:for-each> 
    </svg:defs> 
    </xsl:template> 

    <xsl:template match="svg:use" mode="docs"> 
    <xsl:variable name="dependency" select="@xlink:href" /> 

    <xsl:variable name="fileName" select="substring-before($dependency, '#')" /> 
    <!-- because all defs of all files will be copied, select only external references --> 
    <xsl:if test="normalize-space($fileName)" > 
     <svg:useItem> 
     <xsl:value-of select="$dependency"/> 
     </svg:useItem> 
     <xsl:variable name="loadFile" select="document(concat($relativePath, $fileName))"/> 
     <xsl:variable name="id" select="substring-after($dependency, '#')" /> 
    <!-- scan only the referenced elements --> 
     <xsl:apply-templates select="$loadFile//*[ @id = $id ]//svg:use" mode="docs" /> 
    </xsl:if> 
    </xsl:template> 

    <!-- Remove the name of the document since all dependencies are locally copied in defs --> 
    <xsl:template match="@xlink:href" > 
    <xsl:attribute name="xlink:href"> 
     <xsl:value-of select="concat('#', substring-after(., '#'))" /> 
    </xsl:attribute>  
    </xsl:template> 
</xsl:stylesheet>

来源

2016-11-11 Florimond

当在''中使用时，SVG必须是独立的。见[相关问题]（http://stackoverflow.com/questions/7655070/svg-within-html-does-not-show-embeded-images）。 –

我发现了一种可接受的方式来在不同的浏览器上显示嵌套的svg。让我们来关闭这个问题，因为它看起来没有其他即时的工作。

来源

2016-11-27 20:56:21 Florimond

浏览嵌套SVG：使用仅在Firefox

回答

相关问题