Ich möchte den Hintergrund von svg text ähnlich wie background-color in css färben
Ich konnte nur Dokumentation zu fill finden, die den Text selbst einfärbt.
Ist es überhaupt möglich?
Nein, das ist nicht möglich, SVG-Elemente haben keine background-... Präsentationsattribute .
Um diesen Effekt zu simulieren, könnten Sie ein Rechteck hinter dem Textattribut mit fill="green" oder etwas Ähnlichem (Filter) zeichnen. Mit JavaScript können Sie Folgendes tun:
Sie könnten einen Filter verwenden, um den Hintergrund zu generieren.
Die Lösung, die ich verwendet habe, ist:
%Vor%Ein doppeltes Textelement wird mit den Attributen stroke und stroke-width platziert. Der Strich sollte mit der Hintergrundfarbe übereinstimmen, und die Strichbreite sollte gerade groß genug sein, um einen "Klecks" zu erzeugen, auf den der eigentliche Text geschrieben werden kann.
Ein bisschen wie ein Hack und es gibt potenzielle Probleme, aber funktioniert für mich!
Antwort von Robert Longson (@RobertLongson) mit Änderungen:
%Vor%und wir haben kein Bluring und keine schwere "getBBox" :) Die Auffüllung erfolgt durch Leerstellen im Textelement mit Filter. Es hat für mich funktioniert
das ist mein Lieblings-Hack (nicht sicher, dass es funktionieren sollte). Es verweist auf ein Element, das noch nicht angezeigt wird, und es funktioniert ziemlich gut
Anstatt ein <text> -Tag zu verwenden, verwenden Sie <foreignObject> Tag kann verwendet werden, was XHTML-Inhalte mit CSS ermöglicht.
Tags und Links css svg background-color