Ich versuche, Zeichen an ein SVG-Textelement anzuhängen, die vom Textinhalt des Textelements getrennt sind. Die Zeichen müssen vor dem Textelement stehen und so aussehen, als wären sie Teil des Wortes, z. wenn das mein tag wäre,

<text ...>bar</text>

Ich würde dann "foo" an die Vorderseite anhängen, so dass Benutzer sehen, wenn es im Browser angezeigt wird:

foobar

aber in Wirklichkeit ist der Textinhalt des Elements immer noch nur "bar".

Ich habe versucht, das CSS :: vor und :: nach Pseudoelementen zu verwenden, aber diese scheinen keine Wirkung zu haben:

svg text::before
{
  content: "foo"
}

Sie funktionieren jedoch einwandfrei für Nicht-SVG-Elemente:

li::before
{
  content: "foo"
}

Wenn dies nicht möglich ist, gibt es eine Möglichkeit, den Abstand zwischen SVG-Textelementen auf Null zu setzen? z.B

<text class="something" text-anchor="end" dy=".5ex" y="110.25" x="-15">foo</text>
<text style="display:block; float:left; padding: 1px;" class="something-else" text-anchor="end" dy=".5ex" y="110.25" x="-15" font-family="FontAwesome">bar</text>

erscheint so, dass "foo" direkt auf "bar" gestapelt ist. Ich kann die x-Koordinate ändern, indem ich sie in Augenschein nehme, aber das ist wirklich unpraktisch, da ich keine Kontrolle über die Breite der beiden SVG-Textelemente habe.