Zahlenrad in HTML erstellen?
Hallo,
ich würd gern solche Zahlenräder wie hier:
https://www.grundschulkoenig.de/fileadmin/_processed_/6/8/csm_zahlenraeder_zr20_1_2258043463.jpg
so einfach wie möglich irgendwie in HTML erstellen, dass man die Zahlen danach noch ändern kann und das nicht einfach als komplette Grafik inklusive Zahlen woanders erstellt und dann einfügt? Die einzige Möglichkeit, die ich jetzt wüsste, wäre das Rad an sich als Grafik in den Hintergrund einer Tabelle zu legen, die davor liegt, und in der man an passender Stelle dann die Zahlen einträgt. Aber erstens ist das glaub ich eher ne amateurhafte Variante und zweitens hab ich die Befürchtung, dass sich da möglicherweise ungewollt auch viel verschieben kann.
Gibt es da irgendeine bessere Möglichkeit? Mit CSS etc. kenn ich mich leider nicht groß aus und dafür, wofür ich es brauche, ist das glaub ich auch nur bedingt verwendbar. Höchstens es hätte jemand ne ähnliche Vorlage und ich könnte mal ausprobieren, ob das dort geht.
Wäre dankbar für ne Hilfe :)
4 Antworten
Eine SVG-Grafik würde sich dafür gut eignen. Der SVG-Code kann direkt in HTML eingebunden werden, das Styling lässt sich leicht via CSS definieren. Zudem sind SVG-Grafiken leicht skalierbar.
Hier ein einfaches Muster-Template für das Rad:
<svg class="definition" xmlns="http://www.w3.org/2000/svg">
<symbol id="numberwheel">
<g>
<title>Number wheel</title>
<ellipse cx="111" cy="111" rx="110" ry="110" />
<ellipse cx="110" cy="111" rx="70" ry="70" />
<line x1="31.2" y1="34" x2="189" y2="189" />
<line x1="32" y1="34" x2="189" y2="188" transform="rotate(90 110.66,111) " />
<line x1="220.2" y1="111" x2="1.2" y2="111.9" />
<line x1="111" y1="220.2" x2="111.9" y2="1.2" />
<ellipse cx="110" cy="111" rx="30" ry="30" />
</g>
</symbol>
</svg>
Von diesem kannst du weitere SVG-Elemente ableiten, die die Texte beinhalten:
<svg viewBox="0 0 222 222" xmlns="http://www.w3.org/2000/svg">
<use class="one" xlink:href="#numberwheel" />
<text x="72.2" y="34">1</text>
<text x="138.2" y="34">2</text>
<text x="87.2" y="70">3</text>
<text x="124.2" y="70">4</text>
<text x="24.2" y="81">5</text>
<text x="59.2" y="95">6</text>
<text x="154.2" y="95">7</text>
<text x="192.2" y="83">8</text>
<text x="107.2" y="115">9</text>
<text x="21.2" y="150">10</text>
<text x="57.2" y="134">11</text>
<text x="187.2" y="147">12</text>
<text x="148.2" y="134">13</text>
<text x="71.2" y="198">14</text>
<text x="132.2" y="198">15</text>
<text x="83.2" y="163">16</text>
<text x="121.2" y="163">17</text>
</svg>
Es kann gut sein, dass die Zahlen nicht exakt an optimaler Stelle sitzen, doch das kannst du für dich selbst ja leicht ändern. Um es dir bei der Pflege noch leichter zu gestalten, könntest du dem Muster noch Kommentare zufügen, die je Textelement die entsprechende Feldposition beschreiben:
<text x="72.2" y="34">1</text><!-- links oben aussen -->
<!-- etc. ... -->
All dem zugefügt wird noch ein CSS, andernfalls wirst du einen schwarz ausgefüllten Kreis angezeigt bekommen.
ellipse,
line {
fill: inherit;
stroke: inherit;
}
text {
font-family: sans-serif;
font-size: 14px;
}
.definition {
border: none;
display: block;
position: absolute;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
width: 0;
}
.one {
fill: white;
stroke: black;
}
Statt Schwarz / Weiß kannst du auch andere Farben verwenden. Entweder vordefinierte Webfarben oder spezifischere Angaben (RGB / Hexadezimalcodes / ...). Lies dazu hier.
Beachte zudem, dass die Styles über einen Klassenselektor definiert werden, welcher auf dem use-Element sitzt. Wenn du ein neues Zahlenrad einfügst und dem andere Farben geben möchtest, definiere einen anderen Selektor für use und gib diesen im CSS an.
Beispiel:
<use class="two" xlink:href="#numberwheel" />
CSS:
.two {
fill: yellow;
stroke: blue;
}
Weitere Informationen zum Zusammenspiel zwischen SVG und CSS kannst du wiederum hier nachlesen.
Eine komplette Demo zu all dem findest du hier.
Wenn du dir nochmal ein neues Zahlenrad erstellen möchtest, kannst du dafür auch Grafikanwendungen wie Adobe Illustrator oder Inkscape nutzen. Ebenso gibt es kostenlose Online-Editoren, die vollkommen ausreichen. Suche bei Google nach svg draw online o.ä..
Nutze vorzugsweise einfache Formen (Linien, Ellipsen, ...) und wenn du die zusammenfassen möchtest, kannst du sie in einen Pfad konvertieren lassen. Im obigen Fall habe ich die Linien und Kreise als einzelne Elemente belassen. Wären sie ein einzelner zusammengesetzter Pfad, könnte man die Hintergrundfarbe auch als transparent definieren, ohne auf das Problem zu stoßen, dass die Linien den inneren Kreis durchbrechen. Aber diesen Aufwand überlasse ich dir, wenn er denn überhaupt erforderlich ist.
Ich habe keine Ahnung, wo du die Grafiken letztendlich verwenden möchtest. Ursprünglich war von HTML die Rede, inzwischen scheint es doch keine Option mehr zu sein. 🤔
Wenn du eine Pixelgrafik benötigst, kannst du das SVG-Bild auch in einem Grafikprogramm importieren und als PNG / JPG / ... neu abspeichern.
Das Problem ist folgendes: Grundsätzlich basiert das Ganze, wo ich es verwenden wollte, auf HTML. Das heißt ich kann dort problemlos svg-Grafiken, die als Link vorliegen, einbinden. So wie du es gesagt hast. Deshalb wäre für solche Sachen eine Vektorgrafik natürlich ja wesentlich eleganter als eine Pixelgrafik.
Allerdings kann ich über die bereitgestellte Plattform von dem Unternehmen, für das ich das nehmen wollte, nur png-Grafiken auf den verwendeten Server hochzuladen. svg-Grafiken werden über dieses Tool nicht erkannt. Ich hätte also maximal die Möglichkeit, die svg-Grafiken selbst anderweitig wo hochzuladen und dann den Link dazu einzubinden. Aber das ist natürlich auch keine Option, weil es wenn dann auf dem entsprechenden Server liegen sollte und nicht irgendwo anderweitig im Internet. Leider ist das alles ein ziemlich unflexibler Sauhaufen dort, sodass man selbst mit solch einfachen Problemen scheitert.
Und kannst du HTML-Code einfügen? Denn dafür wäre der Part in meiner obigen Antwort gewesen. Der svg-Tag kann wie ein normaler HTML-Tag in einem HTML-Dokument verwendet werden.
Ansonsten: SVG-Code in SVG-Datei speichern, in Grafikprogramm importieren und als JPG o.ä. abspeichern. Einige Programme erlauben auch das Einfügen von SVG-Code direkt, sodass Schritt 1 halb übersprungen werden kann.
Oder dritte Möglichkeit: Z.B. mit Gimp das Zahlenrad zeichnen. In Gimp kannst du verschiedene Ebenen anlegen (z.B. Ebene 1: Kreis mit Linien, Ebene 2: verschiedene Textelemente) und das Projekt als xcf-Datei (Grafikprojekt, also dein künftiges Template) speichern. Wenn du ein Zahlenrad mit konkreten Zahlen brauchst, brauchst du nur das Projekt öffnen, die Zahlen setzen und das Ergebnis als JPG o.ä. abspeichern.
Einfachen html-Code kann ich schon einfügen, aber der svg-Tag funktioniert dort nicht. Das Einfachste wäre gewesen, wenn ich anderweitig Zugang auf den Server hätte statt nur über das blöde Grafik-Upload-Tool, dann wäre das alles kein Problem gewesen. Dann hätte man dort einfach die svg-Grafiken hochladen und den Link einbinden können, das ginge ohne Probleme. Aber da sind die wie gesagt leider zu unflexibel dazu. Deshalb werde ich es wahrscheinlich einfach als Pixelgrafik machen, auch wenn es keine professionelle Variante ist, sowas so zu machen. Aber soll mir dann egal sein.
Hast du eigentlich einen Tipp, wie man sich von Grund auf in css etc. mal ein bisschen einarbeiten kann. So die prinzipielle Logik vom Code her aus mathematischer Sicht verstehe ich schon, ich bin da allerdings immer überfordert, wenn man so viel Code auf einmal sieht und keine wirkliche Vorstellung hat, was da wie ineinander greift, weil einem die grundlegenden Basics dafür fehlen.
Ja, das kann ich nachvollziehen. Also am Aufbau von Selektoren und dem Begriff der Kaskade kommst du zunächst nicht vorbei. Das ist aber nicht so schwer. Vor allem, wenn man es ein paar Mal praktisch angewandt hat. Schau einfach einmal hier - oder noch ausführlicher hier (konkret der erste Teil der Schritt-für-Schritt-Einführung sollte erst einmal vollkommen ausreichen).
Wenn du selbst Seiten von grundauf gestaltest, hast du natürlich selbst in der Hand, ob du in der CSS-Datei eine Schreckensherrschaft des chaotischen Codes zulässt oder ob du das Chaos durch ein konsistentes System zügelst. Ich habe schon einmal hier etwas mehr dazu geschrieben.
Vor allem wenn du an bereits bestehenden Seiten arbeitest, die du analysieren / erweitern möchtest, würde ich dir dazu raten, mit den Webentwicklungstools deines Browsers zu arbeiten. In jedem der bekannten Browser (Chrome, Edge, Firefox, Opera, Safari, Brave, ...) dürftest du den Eintrag Element untersuchen (o.ä.) im Kontextmenü finden, wenn du einen Rechtsklick irgendwo auf der Webseite durchführst (bestenfalls nicht auf Videoplayer^^). So öffnen sich die Entwicklertools (andernfalls gibt es auch in den Menüs der Browser irgendwo einen Eintrag - lässt sich aber schnell, meist intuitiv finden) und konkret der Inspektor. In diesem siehst du das komplette Document Object Model (DOM), wie es vom Browser nach dem Laden der Seite zusammengebaut wurde. Das Element, welches du beim Rechtsklick erwischt hast, wird sogar direkt schon selektiert und in der rechten Seite des Fensters siehst du alle Stylesheets, die auf das selektierte Element wirken. Die, die sich gegenseitig überschreiben, werden durchgestrichen angezeigt. m Tab Computed (o.ä.; ebenso noch im rechten Dialog) findest du zudem alle Eigenschaften mit ihren derzeitigen Werten aufgelistet.
Der Inspektor erleichtert es dir enorm, Seiten zu analysieren und nachzuvollziehen, wieso der Button X rot, aber der Text Y blau ist. Du kannst dir anzeigen lassen, welche CSS-Datei für den Spuk eines Selektors verantwortlich ist (oder es ist ein Inline-Style) und noch besser: Du kannst selbst Properties ergänzen, entfernen, deaktivieren. Auch das DOM im linken Teil kannst du beeinflussen: Elemente verschieben, Attribute ändern, HTML ändern, ... - sobald du die Seite allerdings neulädst, sind alle Änderungen, die du im Inspektor getätigt hast, wieder weg.
Soweit ein kurzer Abriss. Wenn du dich etwas selbst damit beschäftigst, wirst du vermutlich schnell hineinkommen. Du kannst ja auch selbst kreierte Seiten für den Anfang analysieren.
Dazu noch ein Tipp bzgl. der Browserwahl: Ich persönlich finde, dass der Chrome Browser die beste Funktionalität hinsichtlich der Entwicklertools bietet. Meine zweite Wahl wäre der Firefox. Der IE oder den alten Edge kann ich nicht empfehlen.
cit "dass man die Zahlen danach noch ändern kann" - das geht nicht.
html ist statisch.
Und diese Sache mit Grafik Hintergrund und Zahlen vorne, - das sieht bei jedem am eigenen Schirm vermutlich anders aus und selten so, wie Du wollest.
Mache das in php. Google findet.
Der Nutzer gibt die Eingaben ein und php erstellt jeweils eine neue Seite in html damit.
Ich meinte jetzt nicht, dass der Nutzer Zahlen eingeben oder ändern können soll. Sondern einfach, dass ich mir selbst ne Vorlage erstelle, in der ich die Zahlen danach manuell überschreiben kann, wenn ich etwa dran ändern will. Und nicht wie bei ner Grafik, in die ich die Zahlen mit reinschreibe, die ganze Grafik neu generieren und einfügen muss.
ah so!
Also das geht einfach.
Du nimmst Dir die Freeware "paint.net" und legst eine neue Ebene an. Das bedeutet, dass eine transparente Fläche über eine Grafik gelegt wird. Speichern.
Jetzt schreibst Du Deine Zahlen auf die obere Fläche und führst die Ebenen zusammen. Das Konvolut speicherst Du unter png oder jpg.
Willst Du etwas ändern, so holst Du Dir Deine abgespeicherte 2 Ebenen Sache wieder herein und veränderst nur die Ebene mit den Zahlen bzw. schreibst neue Zahlen auf die obere Ebene. Und dann wie davor.
Hinweis: png kann NICHT in 2 Ebenen speichern. Das machst Du im paint.net-Eigenen Format.
Ok, das ist ja wie wenn ich es in Photoshop oder Geogebra auch machen würde. Das meintest du denk ich ja. Ich wollte es halt irgendwie so machen wie ich es beschrieben hatte mit einer HTML-Tabelle im Vordergrund, wo ich die Zahlen direkt dann ändern kann im Quellcode und nicht den Umweg über eine Grafik gehen muss. Aber ich hatte fast schon befürchtet, dass sowas nur bedingt funktionieren wird.
Im Quellcode mit einer Tabelle ginge es schon, doch das ist ein Vielfaches der Arbeit, als einfach ein Bild neu hochzuladen.
Denn Tabellen sind so unübersichtlich. Bis Du die Zahlen einmal gefunden hast, wo sie stehen und dann die richtigen in der richtigen Zelle erwischt.... Es ist wirklich die größere Arbeit. Gehen würde es schon. Es ginge auch mit JavaScript, doch das ist richtig masochistisch.
mein Vorschlag: Grafik tauschen.
Natürlich geht es in Photoshop auch.
Du kannst ja auch mit 3 Ebenen arbeiten. Also Du legst eine dritte Ebene über alten die Zahlen und schreibst DARAUF die neuen. Da brauchst Du die Position nicht lange zu kalibrieren.
Ich denke allein in html wird das schwer.
Ich würde tatzächlich einfach die Grafik nehmen ohne Zahlen und dann mit html eine div mit absuluter position drüber legen und da die zahlen rein schreiben
klar gehen tut es schon aber ich stelle mir gerade vor wie ich mit kreisene und strichen versuche das ding in html nachzubauen und dabei meine monitore zusamenhau
Wieso - schon mal was von Hintergrund Bitmap gehört.
Außerdem gäbe es natürlich auch SVG
Alles ganz normales und einfaches HTML
Tabelle ist eine ganz schlechte Idee wie du selbst bemerkt hast.
Die Lösung wäre die <div> als Container der als Hintergrund die Grafik hat
In diesen Div dann die entsprechenden Texte als <p> und diese relativ zum Container positionieren
Eine Andere und Elegante Lösung wäre alles über ein SVG zu machen (also alles in einer Grafik)
Die Texte müsste man dann als Platzhalter für jede Pos vorsehen und entsprechend durch JS oder per PHP ersetzen
Oh, vielen Dank für die ausführliche Erklärung. Ich hab es mir jetzt mal in Excel zusammengeschrieben, weil man da schön zufällig die Zahlen erzeugen kann und recht schnell verschiedene Varianten damit erzeugen kann. Aber das müsste man dann per Screenshot als Pixelgrafik speichern und kann es danach nicht mehr ändern. So richtig das Gelbe vom Ei ist das dann eben nicht. Mal schauen, ob ich mich durch deine Lösung mal durcharbeite. Dafür, wofür ich es brauche, wird es leider schon mit dem Einbinden von svg-Grafiken schwierig, wahrscheinlich ist da ne Pixelgrafik doch die einfachste (wenn auch natürlich nicht besonders professionelle) Lösung.
Danke aber auf jeden Fall mal, hilft mir sicher anderweitig bestimmt mal wo weiter :)