SVG Layout ist ein JQuery-Plugin zum Rendern eines Layout von SVG-Elementen.

Beschreibung#

Scalable Vector Graphic, kurz SVG, ist eine sehr effiziente Methode um grafische Elemente in eine Web-Seite zu bringen. Im Gegensatz zu HTML-Elementen fehlen bei SVG fortschrittliche Werkzeuge für das Layout. SVG Layout füllt diese Lücke.

Beispiel#

Folgendes Beispiel zeigt ein Flex-Layout:

<svg flex="content-height" style="width: 100%; background-color: #f0f0f0;">
	<c:forEach begin="1" end="10">
		<g flex="top" height="20">
			<g x="0" y="0" width="100">
				<text x="10" y="20" font-size="14px">Left label</text>
			</g>
			<g flex="left fill-row">
				<rect x="0%" y="10" width="10%" height="10" fill="blue"/>
				<rect x="10%" y="10" width="80%" height="10" fill="green"/>
				<rect x="90%" y="10" width="10%" height="10" fill="yellow"/>
			</g>
			<g flex="right" width="200">
				<text x="10" y="20" font-size="14px">Right label</text>
			</g>
		</g>
	</c:forEach>
</svg>

Hinweis: Das Beispiel enthält zusätzlich einen JSF-Tag <c:forEach> um eine Wiederholung zu erzeugen.