使用 javascript/jquery 将 html 转换为 svg答案

【问题标题】：Converting html to svg using javascript/jquery使用 javascript/jquery 将 html 转换为 svg
【发布时间】：2011-07-28 21:27:41
【问题描述】：

有没有办法将 html sn-p 转换为 svg？

例如： <b>This is bolded</b>

我想用上面的html sn-p制作一个svg文档...可以吗？

【问题讨论】：

不是一个明确的参考，但足以让你继续前进：w3schools.com/svg/default.asp
这里是使用文本元素的快速教程：tutorials.jenkov.com/svg/text-element.html
@RobG 但它真的需要 HTML 代码并将其转换为 svg 吗？我要做的是通过提供 div 元素的 innerHTML 而无需进行任何手动更改来创建 svg。
在支持它的浏览器中使用内嵌 svg：developer.mozilla.org/en/svg_in_html_introduction
MDN: Drawing DOM objects into a canvas

【解决方案1】：

我建议您编辑您的问题以描述您要实现的实际用例和目标，因为直接实现您似乎要求的内容很难（见下文）。 SVG-in-XHTML 或 XHTML-in-SVG（例如，this）的某种组合更有可能满足您的需求。

如果您告诉我们您的目标，我们只能帮助您实现您的目标，而不是要求我们帮助您解决您认为实现目标的特定实施。

正如我上面提到的，没有一种简单的方法可以按照您的建议进行操作。特别是，HTML 具有自动换行、浮动和一般定位概念，以及显式 z 索引，这些在 SVG 中不存在。

然而，以下疯狂的做法大多会奏效：

在您的页面上创建一个 iframe 或 div 并将 HTML 设置为您的 sn-p。
遍历每个元素并在文本中的每个单词周围转换一个 margin:0;padding:0;border:0 跨度。
遍历每个元素（包括您创建的跨度）并计算页面上的绝对位置。（jQuery 有一种方法可以做到这一点，或者您可以使用offsetLeft/offsetTop 和offsetParent 的组合来向上定位树并自己计算。）
- 通过遍历树并使用getComputedStyle() 并创建本地 z-index 链来计算每个元素的等效 z-index。
- 对于每个元素，在 SVG 中创建具有绝对定位的等效元素。
按 z 索引的层次结构重新排序您创建的 SVG 元素。

【讨论】：

【解决方案2】：

检查此html to SVG demo，（使用商业产品 HiQPDF）。您可以在那里找到 C# 和 VB.NET 的代码示例。您可以根据需要转换 URL 或 HTML 代码 sn-p。

【讨论】：

【解决方案3】：

有 JS 库，可以将 html 转换为画布： http://html2canvas.hertzen.com/ 但是直到现在，我还没有找到类似 svg 的东西。

【讨论】：

我很幸运地将html2canvas 与canvas2svg 结合在一起：您可以通过选项将canvas 元素传递给html2canvas；如果将canvas2svg 包装为虚拟HTML canvas 元素并将其传递给html2canvas，它会“绘制”为SVG 而不是canvas。但是canvas2svg 还不完美，所以您应该验证结果是否足以满足您的目的
例如类似：var fauxCanvas = { ctx: new C2S(), getContext: function(){ return this.ctx; }, style: {}, ownerDocument: document }; html2canvas(domNode, {canvas: fauxCanvas}).then(...