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

Posted by dugeen on Stack Overflow See other posts from Stack Overflow or by dugeen
Published on 2010-03-11T20:38:19Z Indexed on 2010/03/12 8:27 UTC
Read the original article Hit count: 124

Filed under:

svg

|

text

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?

© Stack Overflow or respective owner

Related posts about svg

Firefox -- Dynamically embedding <svg> element in SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However… >>> More
manipulate objects outside svg with javascript-function inside the svg

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call… >>> More
javascript replace text with images problem

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card… >>> More
SVG Salamander example?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there. I'm toying with Java and SVG Salamander but cant quiet get how to render a simple SVG file into a Jpanel. Could someone give me a brief example? Tried to follow the loose tutorial in the official site, but could not find a simple code to get a better understanding. So, some code is really… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More

Related posts about text

Error in running script [closed]

as seen on Programmers - Search for 'Programmers'
I'm trying to run heathusf_v1.1.0.tar.gz found here I installed tcsh to make build_heathusf work. But, when I run ./build_heathusf, I get the following (I'm running that on a Fedora Linux system from Terminal): $ ./build_heathusf Compiling programs to build a library of image processing functions… >>> More
Coloring even heighten columns

as seen on Stack Overflow - Search for 'Stack Overflow'
I try to set different a background colors for left and right columns and to maintain the same height. So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar. But this didn't work. Online Demo I want it to work on all browsers. Markup: <!DOCTYPE… >>> More
HTML: How to create a DIV with only vertical scroll-bar to show long paragraphs on a webpage?

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all text. Currently I am using this code: <div style="width:10;height:10;overflow:scroll"… >>> More
Qt Linking Error.

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I configure qt-x11 with following options ./configure -prefix /iTalk/qtx11 -prefix-install -bindir /iTalk/qtx11-install/bin -libdir /iTalk/qtx11-install/lib -docdir /iTalk/qtx11-install/doc -headerdir /iTalk/qtx11-install/include -datadir /iTalk/qtx11-install/data -examplesdir /iTalk/qtx11-install/examples… >>> More
XSLT Escape Character not working

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying to use escape charaters in my text output, as i would like too surround the output in emailData tags. I am using <xsl:text><emailData></xsl:text> In the XSLT to esnure that this works however because i am using a tool called Cast Iron for some reason it… >>> More