Draw path above text in svg

Question

I've researched a lot the past two days and I'm overwhelmed so please be nice. What I'm trying to do is create an annotation above fragments of some text.

Lets say we have this sentence: "This is an example" .

So if I wanted to draw a shape (path) above "This is" fragment like this how would I go with it? (Imagine that "$1.65 billion" is "This is")

1. How can I have the start and the end of the fragment I want.
2. Do you know a library that will make this task easier?
3. How can I detect if one shape overlaps another (eg annotate "This is" and "is an").

This is going to be dynamic so, I have to be able to do the above in a dynamic way.

I'm not looking for code, just for guidance. I don't have any code myself because I really don't know where to start. Any help-tip would be appreciated.

EDIT I'm a complete noob to svg. In my research I've stumbled upon Raphael.js and svg.js .

Answer 1

I'd probably cut this into 2 different tasks:

1) Text generation and annotation marking : this is actually the harder part since you might have overlaps in your marker.

2) Drawing the annotation : once you have the coordinates of your markers, it's actually rather easy to draw the annotation using css and an svg background.

Here's an example to get you started: http://jsfiddle.net/wAq4U/1/ . I avoided the hard problem of annotation collision so you'll need to find a way to mark overlapping words.

In the example, I used plain html to write the sentence and mark the annotations with a span. Then I used css and javascript to position the annotations on top of each marker.

<div class="annotation-segment">
   This <span class="marker" data-anno-id="0">is a</span>
   <span class="marker" data-anno-id="1">sample</span> text
</div>

Edit :

Here's an example of using a svg background stretched to 100% to mark your annotation. I used the first SVG example I found on google for illustration but any SVG should work fine: http://jsfiddle.net/wAq4U/3/

As for overlapping markers, that's an interesting problem and I'd appreciate an update how you manage to solve this problem.

Edit 2 : Here's a more concrete example of how to use a SVG background to cover the length of the marker: http://jsfiddle.net/wAq4U/4/