CODEWITHSUNDEEP
csstextsvg
InvalidCode
InvalidCode

Reputation: 3

SVG: text in opposite direction

I am looking for a solution to include a SVG text tag on the right site of my SVG graphic so I typed in:

<svg width = "300" height = "200">
  <text x = "200" y = "100">Foo</text>
</svg>

which rendered like this:

example 1
=========

+--------------------+
|                    |
|                    |
|             Foo -> |
|                    |
|                    |
+--------------------+

The problem is, I'd like to have the text direction (or whatever thats called) to be from the right site to the left,

example 2
=========

+--------------------+
|                    |
|                    |
|             <- Foo |
|                    |
|                    |
+--------------------+

so I tried two things so far:

  1. <text x = "200" y = "100" writing-mode = "rl-tb">Foo</text>as described on MDN

  2. <text x = "200" y = "100" text-anchor = "end">Foo</text> as described on MDN

Both results looked like example 1. Does anyone know a solution to get example 2 as result?

Upvotes: 0

Views: 341

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

You just want text-anchor="end" like so I think.

<svg width = "300" height = "200">
    <rect width="300" height="200" fill="yellow" opacity="0.5"/>
  <text x = "300" y = "100" text-anchor="end">Foo</text>
</svg>

Upvotes: 1

Related Questions