Просмотр вложенного 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 по другой теме, я попытался отобразить red_rectangle.svg в файле html5:

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

Вывод: все браузеры отображают только красный прямоугольник, без зеленого или черного из них .. .

Кто-нибудь знает какую-нибудь работу? Спасибо

Я снова: это черная дыра. Тогда я решил по-другому решить проблему. Вот таблица стилей XSL, которые преобразуют набор svg в один. Не уверен, что он охватывает все случаи ... но он решает мою проблему.

<?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

ответ

Смежные вопросы