在HTML页面上绘制箭头以可视化文本跨度之间的语义链接

本文介绍了在HTML页面上绘制箭头以可视化文本跨度之间的语义链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述我有一个HTML页面，其中包含一些文本跨度： ... ... p65 ... 招聘 ... I。每个跨度都有一个ID，并通过ID指向零个或多个跨度。我想将这些引用可视化为箭头。两个问题：如何将跨度的ID映射到跨度呈现的屏幕坐标？ $ b 解决方案应该如何绘制从一个渲染到另一个渲染的箭头？在Firefox中工作，在其他浏览器中工作是一个优点，但并非真正必要。解决方案可以使用jQuery或其他轻量级JavaScript库。：//developer.mozilla.org/en/SVG/Tutorial/Getting_Startedrel =nofollow noreferrer> svg 或 canvas 。从外观上看，你不需要这些箭头来获得任何特定的数学形式，你只需要它们元素之间。尝试 WireIt 。看看这个 WireIt Demo （已被弃用的）。它为浮动对话框 div s之间的每个连线使用标签，然后每个 canvas 元素可以在恰当的位置显示连接线的外观。您可能必须实施额外的旋转箭头，除非您不介意箭头以相同角度进入每个元素。编辑：演示已被弃用。修改：忽略此答案， @Phil H 钉住它 I have an HTML page with some textual spans marked up something like this:...p50...p65...recruitment...I.e. each span has an ID and refers to zero or more spans via their IDs.I would like to visualize these references as arrows.Two questions:How can I map an ID of a span to the screen coordinates of the rendering of the span?How do I draw arrows going from one rendering to another?The solution should work in Firefox, working in other browsers is a plus but not really necessary. The solution could use jQuery, or some other lightweight JavaScript library. 解决方案 You have a couple options: svg or canvas.From the looks of it you don't need these arrows to have any particular mathematical form, you just need them to go between elements.Try WireIt. Have a look at this WireIt Demo (which has been deprecated). It uses a canvas tag for each individual wire between the floating dialog divs, then sizes and positions each canvas element to give the appearance of a connecting line at just the right spot. You may have to implement an additional rotating arrowhead, unless you don't mind the arrows coming in to each element at the same angle.Edit: the demo has been deprecated.Edit: Ignore this answer, @Phil H nailed it 这篇关于在HTML页面上绘制箭头以可视化文本跨度之间的语义链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！