CSS: Halbkreis erzeugen und einzelne Segmente füllen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansprechen
bestimmten grad
darstellen
erstellen
farbe
frage
grafik
grund
halbkreis
hauptproblem
http
langer abstinenz
nette funktionen
quellcode
sache
segment
technik
tip
url
weben
-
Hallo zusammen,
folgendes Vorhaben:
ich würde gern mittels CSS einen Sitzplan erstellen, der ähnlich diesem hier aussieht: http://cdot.lima-city.de/Sitzplan_ziel.jpg
Also ein halbrunder Aufbau (Halbkreis), in dem ich einzelne Kreissegmente hervorheben kann.
Je nachdem, ob z.B. 3 oder 4 Peronen in Reihe eins sitzen (frage ich aus der DB ab), soll der vorhandene Halbkreis dynamisch in 3 bzw. 4 Segmente unterteilt werden.
Würde ich hierbei Rechteckte ansprechen, wäre das ja gar nicht so schwierig.
Der runde Aufbau hingegen, den ich hier als notwendig ansehe, erschwert mir die Aufgabe dann doch etwas, zumal ich bis dato keine Lösung bzw. keinen richtigen Ansatz gefunden hätte.
Dabei ist das größte Problem die Unterteilung des (Halb-)Kreises in einzelne Segmente, die dann auch einzeln ansprechbar/formatierbar sein sollten.
Zu meiner Frage:
Ist sowas mit CSS überhaupt realisierbar?
Wenn ja, habt ihr Tipps denen ich folgen könnte?
Auch für alternative Vorschläge wäre ich sehr dankbar.
Besten Dank vorab für eure Hilfe!
mfG
Cdot -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde in diesem Fall eine Vektorgrafik erstellen. Falls du dich damit auseinander setzen möchtest, empfehle ich folgendes Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
Das Beispielbild, welches du gepostet hast, lässt sich mit SVG wunderbar nachbilden und diesen Vorgang kann man auch automatisieren, z.B. mit PHP.
Was meinst du mit Ansprechbarkeit/Formatierbarkeit der Segmente? Alles was die statische Darstellung betrifft (Farben, Aufteilung, Größe der Segmente) kann man serverseitig vorberechnen und benötigt dann nicht einmal CSS. Soll sich die Darstellung jedoch auf dem Client ändern (z.B. mit hover-Effekten), dann wird das Ganze komplizierter.
Eine Änderung der Farbe von Objekten im SVG wäre soweit ich weiß sogar mit CSS möglich, ich möchte das jetzt aber nicht garantieren. Wenn du komplizierteres machen möchtest, z.B. Größenänderungen, müsste man jedoch evtl. auf Javascript zurückgreifen. -
Heutzutage geht ja vieles und möglicherweise könnte man das, was du darstellen willst, auch mit CSS machen. Ein Ansatz dafür wären die hier
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29
beschriebenen CSS-Möglichkeiten. Das Hauptproblem ist allerdings die Unterstützung durch die einzelnen Browser.
Der von @fuerderer genannte Ansatz (SVG) ist bestimmt besser. Dabei würde ich versuchen, die SVG-Grafiken mit JavaScript zu erzeugen. Dafür gibt es bereits tolle Bibliotheken. Die hier:
http://dmitrybaranovskiy.github.io/raphael/
scheint mir besonders interessant.
Beitrag zuletzt geändert: 19.11.2017 23:31:19 von mein-wunschname -
Moin!
https://sonokowitsch.de/sachen/halbkreis1.php
https://sonokowitsch.de/sachen/halbkreis2.php
Hier mal eine css-Lösung. Im Quellcode steht dann wie's gemacht ist. Im Grunde recht simpel.
Jedes Segment ist ein quadratisches div mit einer runden Ecke, welches um einen bestimmten Grad gedreht ist.
Die liegen dann halt von außen -> innen und rechts -> links übereinander und ergeben dann die Tortenstücke.
Ich denk wenn Du da noch ein bissl dran rumbastelst wird's auch hübscher :D
Die Browserunterstützung hab ich jetzt nicht getestet, aber eigentlich beruht das auf fast schon alten css-Techniken :)
Beitrag zuletzt geändert: 20.11.2017 4:19:20 von sonok -
Hallo,
erstmal vielen Dank für die Rückmeldungen!
Nach nun doch sehr langer Abstinenz an der aktiven Teilnahme in der Community bin ich nach wie vor überrascht, wie schnell einem hier geholfen werden kann und auch wird...
sonok schrieb:
Hier mal eine css-Lösung. Im Quellcode steht dann wie's gemacht ist. Im Grunde recht simpel.
(...)
Ich denk wenn Du da noch ein bissl dran rumbastelst wird's auch hübscher :D
Die Browserunterstützung hab ich jetzt nicht getestet, aber eigentlich beruht das auf fast schon alten css-Techniken :)
Damit werde ich mal ins Rennen gehen.
Die SVG-Grafiken mögen vl. die "modernere" Lösung sein, aber wie sonok geschrieben hat komm ich mit etwas basteln an der reinen CSS-Lösung genau dort hin wo ich auch hin will (ohne mich in mir bis dato nicht so geläufige Themen einzulesen).
Falls doch nicht, mach ich mich bez. SVG mal schlauer.
Bietet ja augenscheinlich auch andere nette Funktionen.
Also besten Dank nochmal!
Cdot
-
Mach dich mal über inline-svg schlau. Das sollte das absolut einfachste für dich sein. Dort kannst du sehr simpel geometrische Formen definieren und auch ausfüllen wie du witzig bist.
Die CSS Variante lässt auch jede denkbare geometrische Form zu, ist aber nicht dazu gedacht und entsprechend tricky bei komplizierteren Formen zu relaisieren. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
