Question

我的团队的设计师让我们在我们的应用程序中使用SVG“精灵”。我希望能够看到所有可用的图像。我打算解析XML并在后端构建一些东西，但后来我想到了XSLT。我想要一个XSLT文件来解析SVG并创建一个图像列表。我接近了......这就是我所拥有的。

示例SVG（虽然我也在帖子中尝试了示例文件）：

<?xml-stylesheet type="text/xsl" href="/pages/sprites.xslt" ?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="fitness" viewBox="0 0 64 64">
      <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(5 3)" stroke-linecap="square">
        <path d="M5.8,27.0664159 L5.8,10.6333223 C5.8,4.7607008 10.5607008,0 16.4333223,0 L16.4333445,0 C22.3059668,0 27.0666667,4.7607008 27.0666667,10.6333223 L27.0666667,47.3666778 C27.0666667,53.2393002 31.8273665,58 37.699989,58 L37.7000111,58 C43.5726335,58 48.3333333,53.2393002 48.3333333,47.3666777 L48.3333333,30.9333333"/>
        <polygon points="11.6 50.267 11.6 47.367 9.667 44.467 9.667 32.867 11.6 29.967 11.6 27.067 0 27.067 0 29.967 1.933 32.867 1.933 44.467 0 47.367 0 50.267"/>
        <polygon points="54.133 30.933 54.133 28.033 52.2 25.134 52.2 13.533 54.133 10.633 54.133 7.733 42.533 7.733 42.533 10.633 44.467 13.533 44.467 25.134 42.533 28.033 42.533 30.933"/>
      </g>
    </symbol>
  </defs>
</svg>

和XSLT文件在这里找到：

How can I show all symbols in an SVG file?

它主要起作用......它创造了我期待开箱即用的所有dom对象，这非常了不起。但在use里面，我得到了：

#shadow-root (closed)

这是我们在实际应用中看到的...但在我们的应用中，图像嵌套在阴影根中。但在这个版本中，它是空的。似乎与我们在应用程序方面的操作基本相同。有什么问题？

Answer 1

不是从文件中加载符号，而是将它们写入输出并在本地引用。

另外，您需要为已使用的元素定义大小（默认值为100％）。由于position()是从1开始的，因此从显示屏左上角开始减1。

<?xml version="1.0" encoding="UTF-8"?>
<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:copy>
        <xsl:copy-of select="//svg:defs"/>
      </xsl:copy>
      <g stroke="black" fill="black">
        <xsl:for-each select="//svg:symbol">
          <use width="32" height="32">
            <xsl:attribute name="x"><xsl:value-of select="(position()-1) mod 10 * 32"/></xsl:attribute>
            <xsl:attribute name="y"><xsl:value-of select="floor((position()-1) div 10) * 32"/></xsl:attribute>
            <xsl:attribute name="xlink:href">#<xsl:value-of select="@id"/></xsl:attribute>
          </use>
        </xsl:for-each>
      </g>
    </svg>
  </xsl:template>
</xsl:stylesheet>

用xslt查看svg sprites

1 个答案: