Interaktiver SVG ohne lächelnd, JS, ForeignObject und: überprüft ⇐ CSS

[Anonymous]

Ich möchte ein interaktives SVG -Diagramm für Wikisource einbringen. Es gibt ziemlich strenge Anforderungen an das Format, wie im Titel angegeben:

[*] SVG kann einen Inline -Stil enthalten Attribute und Elemente, aber außerdem:
[*] lächelt,
[*] no> no> [*] no> [*] no javaScript, [*] no> javascript, [*] [*] [*] [*] < fremdObject isles,
Also kein Html und CSS: Checked Tricks. />

Code: Select all

#main:has(#chkbox1)          #triangle  { display:none; }
#main:has(#chkbox1:checked)  #triangle  { display:block; }

#main:has(#chkbox2)          #square    { display:none; }
#main:has(#chkbox2:checked)  #square    { display:block; }

#main:has(#chkbox3)          #circle    { display:none; }
#main:has(#chkbox3:checked)  #circle    { display:block; }< /code>

Triangle
Square
Circle

(Wie Sie sehen können, funktioniert dies ohne JavaScript.) Aber es ist nur ein HTML, das nicht zu den Anforderungen passt. JavaScript? https://codepen.io/schlebe/pen/gbBoryk