Moin Matthias,

Evtl. könnte man bei :hover anstatt der hellblauen Füllung die Randline verstärken und die Füllfarbe leuchten lassen.

Hier würde das Element scheinbar vergrößert, weil die Randlinie die Füllfarbe verwendet. Den Schlagschatten müsste man optimieren.

.segment:hover path,
.segment:focus path {
	filter: brightness(1.15) drop-shadow(2px 2px 4px black); 
	stroke-width:2;
	stroke: context-fill;
}

Sieh mal einer an, stroke: context-fill wird mittlerweile mindestens vom Firefox unterstützt. Vor einem Jahr war das noch nicht der Fall.

Für einen Diagramm-Editor (oder dynamisches Erzeugen von Diagrammen z.B. mit Webservice-Daten) hat @Rolf B noch gute Hinweise geliefert – vielleicht lässt sich das sogar mit dem WebComponents-Ansatz kombinieren.

Ja, wobei eben der SVG-Download auch attraktiv klingt!

Kann man die HTML-Serialisierung aus dem Shadow-DOM kopieren oder gibt es keinen Zugriff darauf?

Wenn Du Lust hast, kannst du die unteren ToDos überarbeiten oder löschen.

Das schaue ich mir in nächster Zeit an, ja.

Viele Grüße
Robert