SVG Layout
Your trail: 

This page (revision-1) was last changed on 31-Jan-2018 16:17 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
1 31-Jan-2018 16:17 1 KB Dieter Käppel

Page References

Incoming links Outgoing links
SVG Layout
SVG Layout

Version management

Difference between version and

At line 1 added 29 lines
[SVG Layout] ist ein [JQuery-Plugin|JQuery] 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|JSF] <c:forEach> um eine Wiederholung zu erzeugen.
This page (revision-1) was last changed on 31-Jan-2018 16:17 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
84 Aufrufe

referenziert von
Intersult Produkte
SVG Layout

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2025.11.06 16:59:34 GMT