Gunnar Bittersmann: Alle SVGs aus einem Sprite anzeigen lassen

Beitrag lesen

SELF-Forum

Alle SVGs aus einem Sprite anzeigen lassen

Gunnar Bittersmann Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

@@Gunnar Bittersmann

Du willst also aus einer SVG-Datei my-symbols.svg

<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="foo">…</symbol>
	<symbol id="bar">…</symbol>
</svg>

so etwas generieren

<!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:

<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
Beitrag melden
–
Informationen zu den Bewertungsregeln