问题描述
我的团队的设计师让我们在应用程序中使用SVG"sprites".我希望能够看到所有可用的图像.我打算解析XML并在后端构建一些东西，但是后来我想到了XSLT.我想要一个解析SVG并创建图像列表的XSLT文件.我快要得到它了...这就是我拥有的.
My team's designer has us using SVG "sprites" in our application. I'm want to be able to see all the available images. I was going to parse the XML and build something on the back end but then I thought about XSLT. I'd like to have an XSLT file that parses the SVG and creates a list of images. I'm close to getting it... here's what I have.
示例SVG(尽管我也在帖子中尝试了示例文件):
Sample SVG (although I also tried the sample file in the post):
<?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文件在此处:
and the XSLT file found here:
大多数情况下都可以工作...它开箱即用地创建了我期望的所有dom对象，这真是太了不起了.但是在use里面，我得到了:
It mostly works... it creates all the dom objects I'm expecting out of the box, which is pretty amazing. But inside use I get:
#shadow-root (closed)
这是我们在实际应用程序中看到的内容，但是在我们的应用程序中，图像嵌套在阴影根内部.但是在此版本中，它是空的.似乎与我们在应用程序方面的操作基本相同.有什么问题吗?
which is what we see in our actual app... but in our app, the image is nested inside the shadow-root. But in this version, it's empty. Seems basically the same as how we're doing it on the app side. What's the issue?
推荐答案
与其从文件中加载符号，不如将它们写入输出并在本地引用.
Instead of loading the symbols from a file, write them into the output and reference locally.
另外，您需要为使用的元素定义一个大小(默认为100％).由于position()是基于1的，因此减去1可以从显示的左上角开始.
Aditionally, you need to define a size for the used elements (the default would be 100%). As position() is one-based, subtract one to start top-left with the display.
<?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精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！