使用javascript / jquery将html转换为svg [英] Converting html to svg using javascript/jquery

问题描述

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

例如：
< b>以粗体显示< / b>

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

解决方案我建议你应该编辑你的问题来描述实际的用例和你试图达到的目标，因为直接实现你似乎要求的是很难的（见下文）。 SVG-in-XHTML 或 XHTML-in-SVG （例如

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

---

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

下面的疯狂将主要但是：

• 在页面上创建一个iframe或div，并将HTML设置为您的代码片段。


• 循环遍历每个元素，并将文本中的每个单词换行包围 margin：0; padding：0; border：0 。 b
• 遍历每个元素（包括您创建的跨度）并计算页面上的绝对位置。 （jQuery有一个方法来做到这一点，或者你可以使用 offsetLeft / offsetTop 和


  

  • 计算每个元素的等效z-索引，方法是使用c> offsetParent 来遍历定位的树并自行计算。走上树并使用 getComputedStyle（）并创建一个本地z-索引链。
    
  • 对于每个元素，在绝对定位的SVG中创建相应的元素。
  
  
  
  • 重新排序由z索引层次结构创建的SVG元素。
  
  
  
  

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

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

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

  解决方案

  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-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.

  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.

  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:0 span 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/offsetTop and offsetParent to 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.

  这篇关于使用javascript / jquery将html转换为svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！