在svg中绘制文本上方的路径

Question

过去两天我研究了很多，而且我很不知所措，所以请保持愉快。 我要做的是在一些文本的片段上面创建一个注释。

让我们说这句话：“这是一个例子”。

所以，如果我想在“This is”片段之上绘制一个形状（路径），就像这样  我该怎么做呢？ （想象一下，“16.5亿美元”是“这是”）

1. 如何才能拥有我想要的片段的开头和结尾。
2. 你知道一个能让这项工作更容易的图书馆吗？
3. 如何检测一个形状是否与另一个形状重叠（例如注释“This is”和“is an”）。

这将是动态的，所以我必须能够以动态的方式完成上述操作。

我不是在寻找代码，仅仅是为了指导。我自己没有任何代码，因为我真的不知道从哪里开始。任何帮助提示将不胜感激。

修改 svg我是一个完整的菜鸟。在我的研究中，我偶然发现了Raphael.js和svg.js。

Answer 1

我可能会把它分成两个不同的任务：

1）文字生成和注释标记：这实际上是较难的部分，因为您的标记可能会重叠。

2）绘制注释：一旦有了标记的坐标，使用css和svg背景绘制注释实际上相当容易。

以下是一个让您入门的示例：http://jsfiddle.net/wAq4U/1/。我避免了注释冲突的难题，因此您需要找到一种标记重叠单词的方法。

在示例中，我使用普通的html来编写句子并用span标记注释。然后我使用css和javascript将注释定位在每个标记的顶部。

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

修改：

这是一个使用svg背景拉伸到100％来标记注释的示例。我使用了我在谷歌上发现的第一个SVG示例，但任何SVG应该可以正常工作： http://jsfiddle.net/wAq4U/3/

至于重叠标记，这是一个有趣的问题，我很感激你如何设法解决这个问题。

编辑2 ：以下是如何使用SVG背景覆盖标记长度的更具体示例：http://jsfiddle.net/wAq4U/4/