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

【问题标题】：Draw path above text in svg在svg中的文本上方绘制路径
【发布时间】：2013-06-20 08:00:55
【问题描述】：

过去两天我研究了很多，我不知所措，所以请多多关照。我想要做的是在一些文本片段上方创建一个注释。

假设我们有这句话：“这是一个例子”。

因此，如果我想在“这是”片段上方绘制一个形状（路径），例如我该怎么办？（想象一下“16.5 亿美元”就是“这是”）

我怎样才能有我想要的片段的开头和结尾。
您知道可以简化这项任务的库吗？
如何检测一个形状是否与另一个形状重叠（例如，注释“This is”和“is an”）。

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

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

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

【问题讨论】：

如何生成文本？（即它必须是 HTML 标签或 svg:text）
文本将从服务器检索，因此我可以生成它。哪种方法更好？
你有文本字数的近似值吗？你需要做很多叠加还是只针对文本中的特定单词？
我一般句子不是很大。一般来说，我可能需要在一句话中画出大约 5-6 条路径。但我会有多个句子（在单独的 div - svgs 中）。记住效率是件好事，但我真正需要的是简单。
因为我正在从服务器检索文本，所以我可以在开始绘制之前计算单词。

标签： javascript jquery text svg annotations

【解决方案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>

编辑：

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

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

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

【讨论】：

我投了赞成票，但我最大的问题是分组。这就是为什么我需要从标记的开始到结束的形状。
/* 为此处的注释制作 svg 背景 */ 。这是我需要大帮助的部分。根据标记（段）的大小，svg 形状将如何动态和拉伸或收缩？
查看我的更新，我将注释大小缩放到与标记相同的宽度。注意：这显然不适用于多行句子。
不，这行不通。检查我图像中的卷曲形状。这就是我需要的。它是否卷曲并不重要，但它必须以标记开始和结束并区分它。（感谢您的努力）
其实这个真的很好。谢谢。我不会得到比你更好的答案，你按照我的要求做了，给了我一些可以使用的东西。接受你的回答