SVGs in MVC-Framework organisieren

[borisbaer]

Hallo zusammen,

ich möchte ein Problem angehen, das ich jetzt eine Weile vor mir hergeschoben habe, und zwar die Frage, wie ich in meinem OOPHP-Framework sich wiederholende SVGs organisieren bzw. einfügen soll.

Es geht hier nicht um statische SVGs, sondern um welche, die animierbar sein sollen und die ich je nach Kontext stylen kann.

Es gibt ja zahlreiche Möglichkeiten:

1. Einfach immer wieder kopieren (schlecht, falls man was an der SVG ändern möchte).
2. Über den use-Tag reinholen (nicht animierbar?)
3. Über include-Funktionen, z.B.:

<?php
function checkbox() { ?>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
		<path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
		<polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
	</svg>
<?php }

Irgendwie scheint mir egal welche Möglichkeit nicht so ganz optimal zu sein.

Kann mir da jemand weiterhelfen?

Viele Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

1. Einfach immer wieder kopieren (schlecht, falls man was an der SVG ändern möchte).

Ja, schlecht.

2. Über den use-Tag reinholen (nicht animierbar?)

Ist es nicht?

3. Über include-Funktionen, z.B.:

<?php
function checkbox() { ?>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
		<path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
		<polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
	</svg>
<?php }

Den Code würde ich dir beim Review nicht durchgehen lassen.

Wenn schon, dann so:

<?php
function checkbox() {
  echo <<<EOT
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
      <path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
      <polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
    </svg>
EOT;
}
?>

Aber warum nicht den SVG-Code in eine Datei checkbox.svg und diese einbinden?

<?php readfile('checkbox.svg'); ?>

Du willst die System-Checkboxen durch eigene ersetzen? Kann man machen. Dabei kann man aber auch einiges falsch machen. Möchtest du deine Lösung hier zum Draufschauen präsentieren?

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo,

<?php
function checkbox() { ?>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
		<path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
		<polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
	</svg>
<?php }

Den Code würde ich dir beim Review nicht durchgehen lassen.

soso. Warum nicht?

Wenn schon, dann so:

<?php
function checkbox() {
  echo <<<EOT
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
      <path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
      <polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
    </svg>
EOT;
}
?>

Gunnar, du sprichst mit mehreren Zungen. Sonst propagierst du immer, den PHP-Modus vorübergehend zu beenden, um direkte Ausgaben an den Client zu machen, und hier schlägst du wieder ein echo vor. Gut, es ist Heredoc-Notation und kein String, der in Anführungszeichen steht und hier und da maskiert werden muss - aber meine Verwunderung bleibt: Warum hier wieder mit echo ausgeben??

Aber warum nicht den SVG-Code in eine Datei checkbox.svg und diese einbinden?

<?php readfile('checkbox.svg'); ?>

Das ist wesentlich sauber und eleganter, zugegeben. Das schlägt beide zuvor genannten Beispiele.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Den Code würde ich dir beim Review nicht durchgehen lassen.

soso. Warum nicht?

Bei { ?> und <?php } biegen sich die Fußnägel.

Gunnar, du sprichst mit mehreren Zungen. Sonst propagierst du immer, den PHP-Modus vorübergehend zu beenden, um direkte Ausgaben an den Client zu machen, und hier schlägst du wieder ein echo vor.

Naja, eine alternative Syntax für Funktionen wie bei den Kontrollstrukturen sieht PHP wohl nicht vor‽

<?php function checkbox(): ?>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
		<path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
		<polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
	</svg>
<?php endfunction; ?>

Aber wozu überhaupt eine Funktion?

$checkboxSVG = <<<EOT
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
      <path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>
      <polyline class="b" points="271.7 46.4 143 175.1 94.9 127.1"/>
    </svg>
EOT;

und an den Stellen im Template <?php echo $checkboxSVG; ?>
bzw. kurz <?= $checkboxSVG ?>.

Aber warum nicht den SVG-Code in eine Datei checkbox.svg und diese einbinden?

Das ist wesentlich sauber und eleganter, zugegeben. Das schlägt beide zuvor genannten Beispiele.

Und wohl auch das eben genannte.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber warum nicht den SVG-Code in eine Datei checkbox.svg und diese einbinden?

Das ist wesentlich sauber und eleganter, zugegeben. Das schlägt beide zuvor genannten Beispiele.

Und wohl auch das eben genannte.

Hm, was tut ein PHP-Parser eigentlich bei multiplen readfile() von einundderselben Datei? Lässt er die Platte rotieren oder cachet er zur Wiederverwendung?

Sollte man den SVG-Code besser einmal einlesen und in einer Variablen speichern?

$checkboxSVG = file_get_contents('checkbox.svg');

und mit <?php echo $checkboxSVG; ?> / <?= $checkboxSVG ?> ausgeben?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Bei { ?> und <?php } biegen sich die Fußnägel.

Dann schneid sie Dir, dann passiert nichts. Oder setz ?> und <?php auf eigene Zeilen.

Dass es endfunction nicht gibt, ist blöd, ja. Aber bei Funktionen ist es nicht so schlimm wie bei if/for/while, weil PHP Funktionen normalerweise nicht geschachtelt sind. Zumindest sollte man, wenn man eine HTML Generierfunktion hat, diese schön auf oberster Ebene belassen (maximal in eine class eingepackt).

Ein echo-Befehl ist jedenfalls keine Alternative. Sagt der Syntaxhighlighter meines Vertrauens. Ein readfile ist für statische Snippets denkbar, aber wenn das SVG ein paar variable Werte hat, nützt das auch nichts.

Natürlich kann man eine Datei bild.svg.php einlesen und sie mit <?= ?> garnieren. Dann aber nicht mit readfile, sondern mit include. Dann könnte sie ggf. im Opcache landen, das müsste ich evaluieren (die Teile außerhalb von PHP Tags sind dann ECHO Befehle, aber das ist dann ein Compilat und nicht mein Sourcecode). Ich find's aber nicht gut, weil man ein solches .svg.php nicht sauber parametrieren kann. Da sind Funktionen oder Methoden deutlich besser.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Bei { ?> und <?php } biegen sich die Fußnägel.

Dann schneid sie Dir, dann passiert nichts. Oder setz ?> und <?php auf eigene Zeilen.

Das macht es nicht besser.

☞ Diskussion mit Dem Martin code-etwas-schoener-schreiben/1599975 ff.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Da schrubest du

{ … } ist in PHP ein Block. Bei { ?> foo <?php } hat man aber keinen PHP-Block mehr.

was ich für falsch halte. Kurz mal PHP abzuschalten, um direkte Ausgaben zu machen, tötet den Block nicht.

Das Argument für endXXX ist Les- und Findbarkeit in einer Einrückungswüste. Bei Funktionen ist das, wie erwähnt, weniger dramatisch.

Rolf

[borisbaer]

Hallo Rolf,

Ein echo-Befehl ist jedenfalls keine Alternative. Sagt der Syntaxhighlighter meines Vertrauens. Ein readfile ist für statische Snippets denkbar, aber wenn das SVG ein paar variable Werte hat, nützt das auch nichts.

könntest du mir ein Beispiel für einen solchen variablen Wert nennen? Meinst du width, height usw., die man in den svg-Tag schreibt?

Natürlich kann man eine Datei bild.svg.php einlesen und sie mit <?= ?> garnieren. Dann aber nicht mit readfile, sondern mit include. Dann könnte sie ggf. im Opcache landen, das müsste ich evaluieren (die Teile außerhalb von PHP Tags sind dann ECHO Befehle, aber das ist dann ein Compilat und nicht mein Sourcecode). Ich find's aber nicht gut, weil man ein solches .svg.php nicht sauber parametrieren kann. Da sind Funktionen oder Methoden deutlich besser.

Einige verwenden ja file_get_contents() zum Einlesen von SVGs. Was meinst du dazu? Und inwiefern eignet sich readfile() weniger zum Parametrieren als include(). Mir erschließt sich das nicht.

EDIT: Wenn ich das hier richtig verstehe, ist file_get_contents() weniger effizient als readfile(). Übrigens: Wenn ich versuche, eine SVG so zu definieren $svg = readfile( 'images/user/checkbox.svg' );, um sie in einem Heredoc auszulesen, dann habe ich das Problem, dass die Grafik zweimal gerendert wird, nämlich bei der Definition der Variable $svg und dann noch im Heredoc. Bei file_get_contents() habe ich das nicht.

Grüße
Boris

[borisbaer]

Hallo Gunnar,

2. Über den use-Tag reinholen (nicht animierbar?)

Ist es nicht?

als ich es versucht habe, ging es nicht. In der Regel würde man die „Animationen“ ja im CSS bspw. so gestalten: button.on svg .a { stroke-dashoffset: 500; }. Als ich das mit einer über den use-Tag eingebundenen SVG versucht habe, passierte nichts.

Den Code würde ich dir beim Review nicht durchgehen lassen.

Ich bin kein Profi in Sachen SVG, aber ich vermute, du wunderst dich, warum die Grafik so „zerstückelt“ ist. Das ist der Checkbox-Animation geschuldet.

Aber warum nicht den SVG-Code in eine Datei checkbox.svg und diese einbinden?

<?php readfile('checkbox.svg'); ?>

Guter Vorschlag, danke! Ich habe mich hier noch mehr dazu geäußert.

Du willst die System-Checkboxen durch eigene ersetzen? Kann man machen. Dabei kann man aber auch einiges falsch machen. Möchtest du deine Lösung hier zum Draufschauen präsentieren?

Hier siehst du die Checkbox im Einsatz. Dort siehst du auch, warum ich die SVG so gestaltet habe. Die Checkbox muss sich nämlich „bewegen“. Disclaimer: Unter dem Link ist alles noch WIP.

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

Den Code würde ich dir beim Review nicht durchgehen lassen.

Ich bin kein Profi in Sachen SVG, aber ich vermute, du wunderst dich, warum die Grafik so „zerstückelt“ ist.

Nein, ich meinte nicht den SVG-Code, sondern den PHP-Code.

Hier siehst du die Checkbox im Einsatz.

Leider nicht wirklich. Wenn ich da mit der Tastatur durchtabbe, muss ich mich sehr anstrengen, um zu erkennen, wo der Fokus gerade ist. Anderen mag das nicht gelingen. Es ist zwar ein Fokuseffekt da, der hat aber viel zu wenig Kontrast. Als Hovereffekt völlig ausreichend (Hovereffekte sind eher Spielerei als erforderlich), für den Fokus ungenügend. Mach einen weißen Rahmen drum. Es muss nicht schön sein, sondern auffallen. Mittlerweile unterstützen Browser ja :focus-visible, d.h. Fokusmarkierung wird nur dann angezeigt, wenn man wirklich per Tastaur navigiert.

Das Formular ist visuell zugemüllt. Ein Label an jedem Eingabefeld^[1] und dieselbe Beschriftung nochmal im Eingabefeld? Wozu? Weg mit allen placeholder-Attributen!

[placeholder] {
  outline: thick red solid !important;
  ERROR: placeholder attribute set;
}

ins Stylesheet. Die Verwendung von placeholder ist so gut wie immer ein Fehler.

🖖 Живіть довго і процвітайте

---

1. Korrektur: nein, keine zugänglichen Labels für die Eingabefelder vorhanden ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Korrektur: nein, keine zugänglichen Labels für die Eingabefelder vorhanden

Deine Eingabefelder haben keine Beschriftung. Ein label, das keinem Eingabefeld zugeordnet ist, ist nicht besser als ein span.

So geht’s richtig: Beschriftungen mit label.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das Formular ist visuell zugemüllt.

Und der Bildschirm ist mit Formularen zugemüllt. Warum sind da zwei Formulare – zum Registrieren und zum Einloggen – zu sehen? Ein Nutzer braucht nur eins davon: ein bereits registrierter Nutzer das zum Einloggen; ein noch nicht registrierter Nutzer das Registrierungsformular.

Zeige nur jeweils eins davon an. Zwei Tabs „Registrieren“ und „Einloggen“ bieten sich an.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das Formular ist visuell zugemüllt.

Und noch mehr visueller Müll: die Sterne rechts über den Eingabefeldern. Wozu?

Lass mich raten: um Pflichtfelder anzuzeigen? Der Funktion werden sie nicht gerecht, weil sie nicht wahrgenommen werden. Das Auge liest die Beschriftung und geht dann zum Eingabefeld. Nach so weit rechts schaut das Auge nicht. Die Sterne gehören direkt hinter (von mir aus auch vor) die Beschriftung.

Bei dir sind sie aber völlig überflüssig, weil sowieso alle Felder Pflichtfelder sind.

---

Übrigens sind die Klassen bei <label class="required"> demnächst nicht mehr nötig. Das label kann ja gestylt werden in Abhängigkeit davon, ob das zugehörige Eingabeelment :required ist oder nicht.

• Beispiel mit input nach label
• Beispiel mit input innerhalb von label

(Im Firefox noch hinterm Flag layout.css.has-selector.enabled versteckt. Und wohl auch noch etwas buggy.)

🖖 Живіть довго і процвітайте

[borisbaer]

Hallo Gunnar,

Hier siehst du die Checkbox im Einsatz.

Leider nicht wirklich. Wenn ich da mit der Tastatur durchtabbe, muss ich mich sehr anstrengen, um zu erkennen, wo der Fokus gerade ist. Anderen mag das nicht gelingen. Es ist zwar ein Fokuseffekt da, der hat aber viel zu wenig Kontrast. Als Hovereffekt völlig ausreichend (Hovereffekte sind eher Spielerei als erforderlich), für den Fokus ungenügend. Mach einen weißen Rahmen drum. Es muss nicht schön sein, sondern auffallen. Mittlerweile unterstützen Browser ja :focus-visible, d.h. Fokusmarkierung wird nur dann angezeigt, wenn man wirklich per Tastaur navigiert.

das werde ich tun, danke für den Hinweis!

Das Formular ist visuell zugemüllt. Ein Label an jedem Eingabefeld[^1] und dieselbe Beschriftung nochmal im Eingabefeld? Wozu? Weg mit allen placeholder-Attributen!

Ich kann nachvollziehen, was du meinst, aber für mich sehen Eingabefelder ohne placeholder total seltsam aus … irgendwie „nackt“. Aber ja, ist doppelt gemoppelt, stimmt schon.

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

Weg mit allen placeholder-Attributen!

Ich kann nachvollziehen, was du meinst, aber für mich sehen Eingabefelder ohne placeholder total seltsam aus … irgendwie „nackt“.

Das ist auch gut so. So hat man als Nutzer im Auge, welche Felder man schon ausgefüllt hat und welche nicht.

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo,

Ich kann nachvollziehen, was du meinst, aber für mich sehen Eingabefelder ohne placeholder total seltsam aus … irgendwie „nackt“.

so unterschiedlich kann die Wahrnehmung sein. Für mich sehen sie mit placeholder irgendwie seltsam aus - so, als hätte ich mit Bleistift schon etwas reingeschrieben. Auch dass der placeholder verschwindet, wenn das Feld den Focus bekommt, irritiert mich immer wieder.

Einen schönen Tag noch
 Martin

[Tabellenkalk]

Hallo,

so unterschiedlich kann die Wahrnehmung sein. Für mich sehen sie mit placeholder irgendwie seltsam aus - so, als hätte ich mit Bleistift schon etwas reingeschrieben. Auch dass der placeholder verschwindet, wenn das Feld den Focus bekommt, irritiert mich immer wieder.

mich stört vor allem, dass man sie nicht nutzen kann. Oft möchte ich den Vorschlag leicht verändern, aber man kriegt nur „ätsch, tipp's halt selber nochmal :p “. Selbst kopieren geht ja nicht…

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

mich stört vor allem, dass man sie nicht nutzen kann. Oft möchte ich den Vorschlag leicht verändern, aber man kriegt nur „ätsch, tipp's halt selber nochmal :p “. Selbst kopieren geht ja nicht…

Nicht? 😜

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

Nicht? 😜

du meinst, ich muss gar kein Bildschirmfoto machen, ausdrucken, einscannen und ne OCR drüber laufen lassen?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Nicht? 😜

du meinst, ich muss gar kein Bildschirmfoto machen, ausdrucken, einscannen und ne OCR drüber laufen lassen?

Du hast das Fax in dem Workflow vergessen‽

🖖 Живіть довго і процвітайте

[borisbaer]

Hallo Gunnar,

ich bündle mal meine Antworten:

Deine Eingabefelder haben keine Beschriftung. Ein label, das keinem Eingabefeld zugeordnet ist, ist nicht besser als ein span.

Werde ich nachholen!

Und der Bildschirm ist mit Formularen zugemüllt. Warum sind da zwei Formulare – zum Registrieren und zum Einloggen – zu sehen? Ein Nutzer braucht nur eins davon: ein bereits registrierter Nutzer das zum Einloggen; ein noch nichtregistrierter Nutzer das Registrierungsformular.

Weil Platz war. Ich werde ernsthaft über die Trennung nachdenken. Prinzipiell ist diese Seite bzw. sind diese Formulare ein Fallback zum Login bzw. zur Registrierung über ein Modal.

Zeige nur jeweils eins davon an. Zwei Tabs „Registrieren“ und „Einloggen“ bieten sich an.

Sehr cool, kann ich gut gebrauchen, danke!

Lass mich raten: um Pflichtfelder anzuzeigen? Der Funktion werden sie nicht gerecht, weil sie nicht wahrgenommen werden. Das Auge liest die Beschriftung und geht dann zum Eingabefeld. Nach so weit rechts schaut das Auge nicht. Die Sterne gehören direkt hinter (von mir aus auch vor) die Beschriftung.

Habe ich lokal geändert!

Übrigens sind die Klassen bei <label class="required"> demnächst nicht mehr nötig. Das label kann ja gestylt werden in Abhängigkeit davon, ob das zugehörige Eingabeelment :required ist oder nicht.

Ja, der :has-Selektor ist schon richtig gut. Ich habe die Flag beim Firefox aktiviert. Habe ich lokal auch verändert!

Besten Dank für den ganzen Input, hat mir sehr weitergeholfen! :)

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

Und der Bildschirm ist mit Formularen zugemüllt. Warum sind da zwei Formulare – zum Registrieren und zum Einloggen – zu sehen?

Weil Platz war.

Design ist nicht, den Platz zu füllen. Eher das Gegenteil.

„Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen kann, sondern wenn man nichts mehr weglassen kann.“
— Antoine de Saint-Exupéry

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Design ist nicht, den Platz zu füllen. Eher das Gegenteil.

Also: Design ist, nicht den Platz zu füllen.

(Warum ist mir das Wortspiel nicht gleich eingefallen‽)

🖖 Живіть довго і процвітайте

[Robert B.]

Hallo Gunnar,

Design ist nicht, den Platz zu füllen. Eher das Gegenteil.

oder mit den Worten des Chefdesigners von Coca Cola:

Design is not how it looks, it's how it feels [and works].

Viele Grüße
Robert

[Der Martin]

Hallo,

oder mit den Worten des Chefdesigners von Coca Cola:

Design is not how it looks, it's how it feels [and works].

ich habe mal gelesen, dass das Design (hier speziell: die Silhouette) der Colaflasche einer schlanken Frauenfigur nachempfunden ist.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

ich habe mal gelesen, dass das Design (hier speziell: die Silhouette) der Colaflasche einer schlanken Frauenfigur nachempfunden ist.

Und das Design eines Fasses wurde wem nachempfunden?

Gibt’s dieses Getränk auch in Fässern? 🤔

🖖 Живіть довго і процвітайте

[Robert B.]

Moin Martin,

ich habe mal gelesen, dass das Design (hier speziell: die Silhouette) der Colaflasche einer schlanken Frauenfigur nachempfunden ist.

das wurde in deren Fernsehwerbung aufgegriffen.

Tatsächlich ist die Form der Coca-Cola-Flasche allerdings eine haptische Marke: Früher lagen die Limonaden zur Kühlung noch in Eisboxen und da löste sich durch das Wasser gerne mal das Etikett oder man konnte durch die Eiswürfelschicht hindurch die Flaschenfarbe nicht erkennen. Die Idee von Coca Cola war die Flasche so zu designen, dass man sie durch Fühlen erkennen kann.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@borisbaer

<path class="a" d="M272,156v84a32,32,0,0,1-32,32H48a32,32,0,0,1-32-32V48A32,32,0,0,1,48,16H240a32,32,0,0,1,32,32V158.65"/>

Wenn du dir den Pfad anschaust (der SVGPathEditor ist ein gutes Tool dafür), dann siehst du, dass der letzte Punkt unsinnig ist. Du kannst den Pfad mit z schließen.

Und der erste Punkt ist auch überflüssig; du kannst gleich mit der „runden Ecke“ beginnen:

<path class="a" d="m272 240 a32 32 0 0 1 -32 32 h-192 a32 32 0 0 1 -32 -32 v-192 a32 32 0 0 1 32 -32 h192 a32 32 0 0 1 32 32z"/>

Aber warum path? Ein Rechteck rect kann runde Ecken haben:

<rect x="16" y="16" width="256" height="256" rx="32" />

♫ Like a rounded corner wah-wah

🖖 Живіть довго і процвітайте

[borisbaer]

Hallo Gunnar,

Wenn du dir den Pfad anschaust (der SVGPathEditor ist ein gutes Tool dafür), dann siehst du, dass der letzte Punkt unsinnig ist. Du kannst den Pfad mit z schließen.

danke für den Hinweis mit dem Tool! Ich werde bei Gelegenheit damit herumexperimentieren.

Und der erste Punkt ist auch überflüssig; du kannst gleich mit der „runden Ecke“ beginnen:

<path class="a" d="m272 240 a32 32 0 0 1 -32 32 h-192 a32 32 0 0 1 -32 -32 v-192 a32 32 0 0 1 32 -32 h192 a32 32 0 0 1 32 32z"/>

Aber warum path? Ein Rechteck rect kann runde Ecken haben:

<rect x="16" y="16" width="256" height="256" rx="32" />

Ich kann nicht viel dazu sagen. Adobe Illustrator übernimmt die Arbeit für mich. Bin nicht firm genug in SVGs, aber womöglich erklärt sich’s hier.

Grüße
Boris

[Rolf B]

Hallo borisbaer,

was jetzt untergegangen ist, war die Frage nach dem animierbaren use. Gunnar fragte nur "nicht?" - zeigte aber kein Gegenbeispiel. Wenn Du eins hast, Gunnar, dann gerne her damit.

Ich habe es auch mal probiert - das müsste dann ja so aussehen:

<label class="fancy-checkbox">
  <input name="foo" type="checkbox">
  <svg viewBox="0 0 30 30"><use href="#checkmark"></use></svg>
  <span>Denk an mich</span>
</label>

und in irgendeiner verschwiegenen Ecke steckt ein SVG mit einer defs-Sektion und einem <symbol id="checkmark">

Ich habe eine JS-freie Lösung angestrebt und deswegen - bevor ich use probiert habe - dieses HTML verwendet:

<label class="fancy-checkbox">
  <input name="foo" type="checkbox">
  <svg viewBox="0 0 30 30">
    <rect x="1" y="1" width="28" height="28" rx="5"
          stroke="black" stroke-width="3" fill="none" />
    <path d="M10,15 l5,5 12,-18"
          stroke="black" stroke-width="3" fill="none" />
  </svg>
  <span>Denk an mich</span>
</label>

und die Transitionen mit

.fancy-checkbox input + svg rect {
   stroke-dasharray: 90,0;
   stroke-dashoffset: 0;
   transition: all 0.5s ease-in-out;
}
.fancy-checkbox input:checked + svg rect {
    stroke-dasharray: 90,18;
    stroke-dashoffset: 77;
}

ausgelöst.

Wenn da aber der use steht, befindet sich der path im Shadow-DOM (sofern es eins ist) des use und ich komme mit dem Selektor nicht mehr 'ran. Ich kann und will aber auch nicht das SVG manipulieren, wo das Symbol definiert ist, weil ich dann alle Checkboxen auf einmal animieren würde, die auf der Seite sind.

Vielleicht gibt's SMIL Tricks, aber damit kenn ich mich nicht aus.

Rolf

[Matthias Scharwies]

Servus!

Wenn da aber der use steht, befindet sich der path im Shadow-DOM (sofern es eins ist) des use und ich komme mit dem Selektor nicht mehr 'ran. Ich kann und will aber auch nicht das SVG manipulieren, wo das Symbol definiert ist, weil ich dann alle Checkboxen auf einmal animieren würde, die auf der Seite sind.

Im Wiki gibt es einen (kurzen) Abschnitt zum Problem, das use-Element zu stylen:

• SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM

wenn man jetzt Animationen mit custom properties anlegt und dann im CSS bei :hover, :focus die Werte neu setzt, müsste es gehen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

es ändert sich, aber es animiert nicht. Oder ich bin zu ungeschickt…

Ich hab sogar das --checked Property als @property mit <number> Type definiert.

https://jsfiddle.net/9vpoja4L/

(Die Original-Checkbox ist mit Absicht unversteckt)

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

es ändert sich, aber es animiert nicht. Oder ich bin zu ungeschickt…

Ich hab sogar das --checked Property als @property mit <number> Type definiert.

https://jsfiddle.net/9vpoja4L/

(Die Original-Checkbox ist mit Absicht unversteckt)

Schade!

[EDIT] in FF107 tut das wohl! (Stecke grad im aufgeklären Absolutismus fest. 😀)[/EDIT]

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

oh. Muss ich testen wenn ich wieder einen in den Fingern habe. Gerade nicht.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

oh. Muss ich testen wenn ich wieder einen in den Fingern habe. Gerade nicht.

Noch etwas, was in Chrome nicht geht: https://codepen.io/lagden/pen/gPNJWb

(Im Firefox dreht sich auch der blaue Ring.)

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

tja... https://bugs.webkit.org/show_bug.cgi?id=173154

Rolf

[Matthias Scharwies]

Guten Morgen!

Im Wiki gibt es einen (kurzen) Abschnitt zum Problem, das use-Element zu stylen:

• SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM

wenn man jetzt Animationen mit custom properties anlegt und dann im CSS bei :hover, :focus die Werte neu setzt, müsste es gehen.

Oben drüber findet sich dieser Satz:

Wenn Sie das use-Element über eine Klasse oder eine strukturelle Pseudoklasse wie nth-of-type selektieren, können Sie, falls diese Eigenschaften vorher nicht deklariert wurden, Randfarbe, -stärke und Füllung des use-Elements formatieren. Dies gilt jedoch nicht für die in der Vorlage verwendeten Kind-Elemente.

Vielleicht ist das ein Umweg, das use-Element selbst und nicht die einzelnen rects- und circles zu formatieren.

Herzliche Grüße

Matthias Scharwies