Alle SVGs aus einem Sprite anzeigen lassen bearbeitet von Gunnar Bittersmann 13.11.2018 03:41 @@Gunnar Bittersmann > Du willst also aus einer SVG-Datei my-symbols.svg > > ~~~SVG > <svg xmlns="http://www.w3.org/2000/svg"> > <symbol id="foo">…</symbol> > <symbol id="bar">…</symbol> > </svg> > ~~~ > > > so etwas generieren > > ~~~HTML > <!DOCTYPE html> > <html> > <head> > <meta name="viewport" content="width=device-width, initial-scale=1.0"/> > <title>symbols of my-symbols.svg</title> > </head> > <body> > <dl> > <div> > <dt>#foo</dt> > <dd><svg><use xlink:href="/path/to/my-symbols.svg#foo"/></svg></dd> > </div> > <div> > <dt>#bar</dt> > <dd><svg><use xlink:href="/path/to/my-symbols.svg#bar"/></svg></dd> > </div> > </dl> > </body> > </html> > ~~~ > > XSLT wäre eine Möglichkeit Ewig nicht mehr gemacht. Das XSL könnnte in etwa so aussehen: ~~~XSLT <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>symbols of my-symbols.svg</title> </head> <body> <dl> <xsl:apply-templates/> </dl> </body> </html> </xsl:template> <xsl:template match="symbol"> <div> <dt>#<xsl:value-of select="@id"/></dt> <dd> <svg> <use> <xsl:attribute name="xlink:href"> /path/to/my-symbols.svg#<xsl:value-of select="@id"/> </xsl:attribute> </use> </svg> </dd> </div> </xsl:template> </xsl:stylesheet> ~~~ Völlig ungetestet. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Alle SVGs aus einem Sprite anzeigen lassen bearbeitet von Gunnar Bittersmann 13.11.2018 03:49 @@Gunnar Bittersmann > Du willst also aus einer SVG-Datei my-symbols.svg > > ~~~SVG > <svg xmlns="http://www.w3.org/2000/svg"> > <symbol id="foo">…</symbol> > <symbol id="bar">…</symbol> > </svg> > ~~~ > > > so etwas generieren > > ~~~HTML > <!DOCTYPE html> > <html> > <head> > <meta name="viewport" content="width=device-width, initial-scale=1.0"/> > <title>symbols of my-symbols.svg</title> > </head> > <body> > <dl> > <div> > <dt>#foo</dt> > <dd><svg><use xlink:href="/path/to/my-symbols.svg#foo"/></svg></dd> > </div> > <div> > <dt>#bar</dt> > <dd><svg><use xlink:href="/path/to/my-symbols.svg#bar"/></svg></dd> > </div> > </dl> > </body> > </html> > ~~~ > > XSLT wäre eine Möglichkeit Ewig nicht mehr gemacht. Das XSL könnnte in etwa so aussehen: ~~~XSLT <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>symbols of my-symbols.svg</title> </head> <body> <dl> <xsl:apply-templates /> </dl> </body> </html> </xsl:template> <xsl:template match="symbol"> <div> <dt>#<xsl:value-of select="@id"/></dt> <dd> <svg> <use> <xsl:attribute name="xlink:href">/path/to/my-symbols.svg#<xsl:value-of select="@id"/></xsl:attribute> </use> </svg> </dd> </div> </xsl:template> </xsl:stylesheet> ~~~ Völlig ungetestet. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
nicht angemeldet
