How to place a symbol (path) relative to the far end of svg text?

Question

I'm working on a program which generates SVG maps. Some of the map items have captions which need a symbol after them (like a plane symbol for an airport caption).

If I have a text element thus

<text x="30" y="30">Pericles</text>

I can place another bit of text at the next character position by saying

<text x="30" y="30">Pericles <tspan>!</tspan></text>

but I'd like to draw my own symbol at that position with a <path> element.

What I'm doing at the moment is having the generating program guess the extent of the text from tables of font metrics etc, but this isn't accurate enough to place the symbol consistently.

Is there any way round this - like specifying a <marker> to be used when drawing the text, and using a tspan with an invisible dash in it or something to get the marker placed?

Answer 1

The most straight-forward solution I can think of is still pretty complicated and will not work in some SVG browsers:

Set the tspan containing the symbol to a font named something like my-symbol-font. Then create the font using the SVG Fonts standard. You only need to define one character (or glyph) in your situation, since you only need the one symbol replacement. Define the glyph as the symbol you want to use to replace the ! and set the glyph's unicode to !. It would be something like:

`<glyph unicode="!">`

You should read over the SVG documentation on fonts to get the exact details on how this is done, but if the browser supports SVG fonts it should work. I know that WebKit (Safari/Chrome) supports them, but Firefox, at least 3.5, does not. (FF 3.6 may, I haven't checked).

Also, a cheat that may be helpful, if you have Adobe Illustrator, is to create an SVG using normal text with the last character using a WingDings font. When you save it, Illustrator will ask if you want to embed the fonts used into the SVG using SVG fonts. You can specify that you only want to do this for characters used in the SVG (instead of the entire font set). You could then view the SVG as text to see how it created the wingdings font and single glyph and even copy the entire thing and change the font name to the one you want to use and the glyph's path to your symbol's path. In fact, I might try doing this myself later when I'm at a computer with Illustrator. I'll post a sample if it works the way I expect it to.

Good luck.

Answer 2

It's possible to place any piece of markup where you want by using some scripting. E.g you can use yourTextElm.getBBox() for finding where the text ends or if you need to be a bit more specific you can use the SVG DOM methods for text elements.

If you need it to be fully static without scripting, then defining a font to have the shapes you need is probably the way to go. You can make a custom truetype font if need be, that would work for all the browsers that support webfonts (if you're worried about firefox not supporting svgfonts currently).

Answer 3

Thanks both. This leaves me with an interesting choice between a easy but dynamic solution, and a static one which will take more work.