使用 javascript/jquery 将 html 转换为 svg

Converting html to svg using javascript/jquery

提问by FoGy

Is there a way to convert an html snippet to svg?

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

for example: <b>This is bolded</b>

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

I want to make an svg document with the html snippet above... is this possible?

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

回答by Phrogz

I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTMLor XHTML-in-SVG(for example, this) are far more likely to give you want you want.

我建议你应该编辑你的问题来描述你试图实现的实际用例和目标，因为直接实现你似乎要求的东西很困难（见下文）。SVG-in-XHTML或XHTML-in-SVG 的某些组合（例如this）更有可能满足您的需求。

We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.

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

---

---

As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.

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

The following madness would mostly work, however:

然而，以下疯狂通常会奏效：

• Create an iframe or div on your page and set the HTML to your snippet.
• Loop through every element and convert wrap a margin:0;padding:0;border:0span around every word in the text.
• Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTopand offsetParentto walk up the positioned tree and calculate it yourself.)
  • Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle()and creating a chain of the local z-index.
  • For each of these elements, create the equivalent element in SVG with absolute positioning.
• Re-sort the SVG elements you created by the hierarchy of z-indices.

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

回答by user1589151

Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.

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

回答by Przemyslaw

There are JS libs, that convert html to canvas: http://html2canvas.hertzen.com/But until now, I did not found something similar for svg.

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