使用JavaScript/jQuery将HTML转换为SVG

Question

有没有一种方法可以将HTML片段转换为SVG格式？

例如：<b>这是加粗的</b>

我想用上面的HTML片段制作一个SVG文档...这可能吗？

- FoGy

---

这并不是一个权威的参考，但足以让你开始学习：http://www.w3schools.com/svg/default.asp - RobG

这是一个关于如何使用文本元素的快速教程：http://tutorials.jenkov.com/svg/text-element.html - RobG

@RobG 但它是否实际上接受HTML代码并将其转换为SVG？我想做的是通过提供div元素的innerHTML来创建SVG，而不进行任何手动更改。 - FoGy

在那些支持它的浏览器中使用内联SVG：https://developer.mozilla.org/zh-CN/docs/Web/SVG_In_HTML_Introduction - RobG

MDN：将DOM对象绘制到画布中 - William Ardila

Answer 1

我建议您编辑您的问题，描述实际的用例和目标，因为直接实现您所要求的内容很难（请参见下文）。一些组合SVG-in-XHTML或XHTML-in-SVG（例如这个）更有可能给您想要的结果。

只有在您告诉我们您的目标而不是要求我们帮助您解决特定的实现时，我们才能帮助您实现您的目标。

正如我上面提到的，没有简单的方法来实现您的建议。特别地，HTML具有自动换行、浮动和一般定位概念，以及显式的z-indexing，这些都不存在于SVG中。

然而，以下疯狂的做法基本上会起作用：

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

- Phrogz

---

SVG ForeignObject标签的问题是它不被IE 9支持，而且你也无法序列化SVG。 - FoGy

有人实现了那个“疯狂的”吗？我需要在<img>标签中加载SVG，并且在这种情况下foreignObject不起作用。 - Gustavo Rodrigues

Answer 2

查看这个html转SVG演示，（使用商业产品HiQPDF）。您可以在那里找到C＃和VB.NET的代码示例。您可以按照要求将URL或HTML代码片段转换。

- user1589151

---

优秀的软件。可惜他们没有一个价格合理的产品，只有针对开发人员的库。 - Christian

Answer 3

有一些JS库可以将HTML转换为画布： http://html2canvas.hertzen.com/ 但是目前我还没有找到类似于SVG的东西。

- Przemyslaw

---

我在使用html2canvas和cavnas2svg时有一些小技巧：可以通过选项将一个canvas元素传递给html2canvas; 如果您将一个伪装的HTML canvas元素包装为canvas2svg并将其传递到html2canvas中，它会在SVG中“绘制”，而不是在canvas中。但是，canvas2svg还不完美，所以您应该验证结果是否足够好用。 - russa

var fauxCanvas = { ctx: new C2S(), getContext: function(){ return this.ctx; }, style: {}, ownerDocument: document }; html2canvas(domNode, {canvas: fauxCanvas}).then(...) - russa