SVG skalieren und Größe mit CSS anpassen

[Rolf B]

Hallo petro74,

Vielleicht kann mir jemand nochmals behilflich sein.

Vielleicht könntest Du uns einen Link auf die Seite geben, die das Problem zeigt?

Aus deinen Worten entnehme ich, dass Du SVG Bilder hast, die Du als list-style-image einsetzen möchtest. Die Größe dieser Bilder passt aber nicht. Und jetzt wird es schwierig.

Auf MDN wird eine unglaubliche Menge an Optionen für list-style-image erwähnt, aber entweder ist MDN da einem Troll aufgesessen oder die Spec wurde nach Verfassen des Artikels drastisch eingedampft.

Die Ursprungs-Spec erlaubt die Angabe einer URL, als URL(...) Angabe. Die neuere Spec erlaubt noch zusätzlich die Angabe von Gradienten.

Und das war's. Kein Resizing. Eine Skalierung des list-style-image über das ::marker Pseudoelement ist mir nicht gelungen.

Ich würde an dieser Stelle zu einem Trick greifen. Du kannst list-style-type:none setzen und dem li-Element ein Background-Image geben, das Du so platzierst und skalierst, als wäre es der List-Marker. Hier kannst Du deine SVGs einbinden und sie auch skalieren.

Du musst dafür nur das Padding des ul Elements reduzieren und dem li Element etwas linkes Padding geben, um Platz für den handgemachten Marker zu schaffen.

Aber vielleicht hat ja auch noch jemand eine elegantere Idee.

Rolf