svg上面的文字绘制路径

我已经研究了很多过去两天，我不知所措，所以请好。我想要做的是创建一些文本的片段上面的注释。svg上面的文字绘制路径

可以说我们有这样一句话：“这是一个例子”。

所以，如果我想绘制一个形状（路径）上面的“这是”片段这样的 enter image description here 我会如何去呢？（想象一下，“16.5亿美元”就是“这是”）

我该如何获得我想要的片段的开始和结束。
你知道一个能让这个任务更容易的图书馆吗？
如何检测一个形状是否与另一个形状重叠（例如，注释“这是”和“是”）。

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

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

编辑我是svg的完整noob。在我的研究中，我偶然发现了Raphael.js和svg.js。

来源

2013-06-20 alkis

你如何生成的文本？（即它必须是HTML标记或svg：文本） –

文本将从服务器中检索，所以我可以通过任何方式生成它。哪种方法更好？ – alkis

你有近似文字的字数吗？你是否需要覆盖很多文本或者仅仅是文本中的特定单词？ –

我可能会削减到这2项不同的任务：

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>

编辑：

这里的拉伸至100％，以纪念你的注释使用SVG背景的例子。我使用的第一个SVG例子，我在谷歌找到了示意图，但任何SVG应该很好地工作： http://jsfiddle.net/wAq4U/3/

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

编辑2：这里有一个如何使用SVG的背景覆盖标志的长度更具体的例子：http://jsfiddle.net/wAq4U/4/

来源

2013-06-20 10:34:59

我upvoted，但我最大的问题是分组。这就是为什么我需要从标记开始到结束的形状。 – alkis

/*在这里为注释创建一个svg背景* /。这是我需要大力帮助的部分。根据标记（段）的大小，svg形状将如何动态变形和缩小？ – alkis

查看我的更新，我将注记大小缩放为与标记相同的宽度。注意：这显然不适用于多行句子。 –

svg上面的文字绘制路径

回答

相关问题