如何显示SVG文件中的所有符号? [英] How can I show all symbols in an SVG file?

问题描述

我有一个SVG文件，看起来像这样:

I have an SVG file, which looks like this:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 13 13" id="icon-arrow-down">
        <path d="M12.9 4.5l-6.1 6.1c-.2.2-.6.2-.8 0L.1 4.5c-.1-.1-.1-.2 0-.3l1.8-1.8c.1-.1.2-.1.3 0l4.4 4.4L11 2.4c.1-.1.2-.1.3 0l1.8 1.8c-.1.1-.1.2-.2.3z"/>
    </symbol>
    <symbol viewBox="0 0 13 13" id="icon-arrow-down-double">
        <path d="M12 7.7l-5.1 5.1c-.2.2-.5.2-.7 0L1 7.7v-.2L2.6 6c.1-.1.2-.1.2 0l3.7 3.7L10.2 6c.1-.1.2-.1.2 0L12 7.5v.2z"/>
        <path d="M12 1.8L6.8 6.9c-.2.2-.5.2-.7 0L1 1.8v-.2L2.6 0h.2l3.7 3.7L10.2 0h.2L12 1.6v.2z"/>
    </symbol>

此文件中有数百个符号.

There are hundreds of symbols in this file.

有没有一种简便的方法可以一次查看SVG文件中的所有符号?

Is there an easy way to see all symbols in the SVG file at once?

现在我正在使用HTML来查看单个符号，如下所示:

Right now I'm using HTML to see a single symbol, like this:

<svg><use xlink:href="icons.svg#icon-nextstep-compare"></use></svg>

但这太乏味了.

推荐答案

每个svg文件一个文件?乏味是对的！

One file per svg file? Tedious is right!

只有那么少的乏味(不过，也许您可​​以使用脚本来生成它):

Only slightly less tedious (but perhaps you could use a script to generate this, though):

<svg>
   <use  x="50"  y="50" xlink:href="icons.svg#icon-nextstep-compare" />
   <use x="100"  y="50" xlink:href="icons.svg#icon-arrow-down" />
   <use  x="50" y="100" xlink:href="icons.svg#icon-arrow-down-double" />
   <!-- etc, etc -->
</svg>

---

更新

您甚至可以使用xslt样式表的魔力生成以上内容. :-)

You could even generate the above with the magic of an xslt stylesheet. :-)

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:svg="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
  <xsl:template match="/">
    <svg>
      <xsl:for-each select="//svg:symbol">
        <use>
          <xsl:attribute name="x"><xsl:value-of select="position() mod 10 * 20"/></xsl:attribute>
          <xsl:attribute name="y"><xsl:value-of select="floor(position() div 10) * 20"/></xsl:attribute>
          <xsl:attribute name="xlink:href">icons.svg#<xsl:value-of select="@id"/></xsl:attribute>
        </use>
      </xsl:for-each>
    </svg>
  </xsl:template>
</xsl:stylesheet>

这篇关于如何显示SVG文件中的所有符号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！