CODEWITHSUNDEEP
javascripthtmlcsssvg
user3898238
user3898238

Reputation: 987

How to append characters to an SVG text element without changing its textContent value?

I am trying to append characters to an SVG text element which are separate from the text element's text content value. The characters need to come in front of the text element, and look like they are part of the word, e.g. if this were my tag,

<text ...>bar</text>

I would then 'append' "foo" to the front of it, such that when its displayed in the browser users see:

foobar

but in reality the text content of the element is still just "bar."

I've tried using the CSS ::before and ::after pseudo-elements, but these appear to have no effect:

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

However, they work perfectly fine for non-SVG elements:

li::before
{
  content: "foo"
}

If this is not possible, is there a way to allow zero-spacing between SVG text elements? e.g. 

<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>

appears such that "foo" is stacked directly on top of "bar." I can change the x coordinate by eyeballing it, but this is really inconvenient, as I have no control over the width of either svg text element content.

Upvotes: 1

Views: 1240

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

Sounds like you want a text/tspan combination E.g.

<text><tspan>foo</tspan>bar</text>

or

<text>foo<tspan>bar</tspan></text>

This would allow you to style the foo and bar differently which seems to be what you want.

You can write

tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
text.appendChild(tspan);

to add a tspan to a text element (assuming you've got your text element in the variable called text).

Getting the text content of the tspan just gets the tspan text content for me as one would expect. E.g.

alert(document.getElementById("tspan").textContent);
<svg><text>foo<tspan id="tspan">bar</tspan></text><svg>

Upvotes: 1

Related Questions