为 HTML、XML、SVG 文件创建可共享的注释答案

【问题标题】：Create shareable annotations for HTML, XML, SVG files为 HTML、XML、SVG 文件创建可共享的注释
【发布时间】：2020-04-20 00:28:30
【问题描述】：

我正在寻找使用 JS/Angular/NodeJS 为以下内容创建注释的最佳方法。

 1. Annotating HTML - (comments, drawings, highlighting, etc)
 2. Annotating XML - (comments, drawings, highlighting, etc)
 3. Annotating SVG - (comments, drawings, highlighting, etc)

可以使用相关元素来完成实现，例如用于 HTML 注释的 HTML 元素等。

但是实现必须有一个最好的方法

 1. a unique reference to a specific annotated object
 2. able to export annotated objects related data in any structure like JSON
 3. able to import exported data and append/create related annotations 
using the unique reference based on the X, Y positions

这样所有注释都可以在用户之间共享，并且用户可以将注释导入到同一个有效文档中。

对于上述要求，我需要考虑哪些最佳模式、策略和事项？如果有任何指南、图书馆，请分享链接。

但自定义实现是最首选的方式

谢谢

【问题讨论】：

标签： javascript html xml svg annotations

【解决方案1】：

如果您按照您所说的对 HTML、XML 和 SVG 文件进行 cmets、绘图和高亮显示，我建议您使用 HTML5 Canvas。如果只是注释和 cmets，我会说使用 DOM 元素并跟踪位置，但是在图片中添加绘图会使它变得复杂。

如果这是我，并且我是出于生产目的这样做，我会有两种类型的编辑器。首先，我将拥有涵盖所有图像和 SVG 的图像注释，然后我将拥有使用可编辑 HTML 和 JavaScript 来跟踪用户操作和注释的文档注释。

您可能想看看 Dropbox Paper，这是一个 Web 应用程序，具有您列出的用于编辑文档的大部分功能。

【讨论】：