使用javascript/jquery将html转换为svg

Question

有没有办法将html片段转换为svg？

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

我想用上面的html片段创建一个svg文档......这可能吗？

Answer 1

我建议你编辑你的问题来描述你想要实现的实际用例和目标,因为直接实现你似乎要求的是很难的(见下文).SVG-in-XHTML或XHTML-in-SVG(例如,这个)的某种组合更有可能给你想要的东西.

如果您告诉我们您的目标而不是要求我们帮助您解决您想要实现的特定实施,我们只能帮助您实现目标.

正如我上面提到的,没有一种简单的方法来做你的建议.特别是,HTML具有自动换行,浮动和一般定位概念,以及SVG中不存在的显式z索引.

然而,下面的疯狂大部分会起作用:

• 在您的网页上创建iframe或div,并将HTML设置为您的代码段.
• 循环遍历每个元素并转换包围margin:0;padding:0;border:0文本中每个单词的范围.
• 遍历每个元素(包括您创建的跨度)并计算页面上的绝对位置.(jQuery有做到这一点的方法,或者你可以使用组合offsetLeft/ offsetTop和offsetParent走了定位的树和自己进行计算.)
  • 通过向上走树并使用getComputedStyle()并创建本地z-index链来计算每个元素的等效z-index.
  • 对于每个元素,使用绝对定位在SVG中创建等效元素.
• 重新排序由z-indices层次结构创建的SVG元素.

Answer 2

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