javascript - 使用 javascript/jquery 将 html 转换为 svg

Question

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

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

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

Answer 1

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

只有当您告诉我们您的目标而不是要求我们帮助您解决您认为可以实现这些目标的特定实现时，我们才能帮助您实现目标。

---

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

然而，下面的疯狂行为通常会奏效:

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