将带格式的html文本转换为svg

Question

我正在寻找一个javascript工具/lib，可以转换格式化的html文本(字体标签，页边距等)为svg。我使用bootstrap-wysiwyg来启用富文本输入，但需要将结果转换为原生svg。初始html类似于：

<div id="editor" contenteditable="true">Go <font face="Sans">ahead</font>… and&nbsp;
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
    <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
        <div><font size="15" face="Impact">by the&nbsp;</font></div>
    </blockquote>
</blockquote>
<div>
    <div style="text-align: center;"><font size="15" face="Courier New" style="color: inherit;">way</font><span
            style="color: inherit;">&nbsp;</span></div>
</div>
<div>
    <div style="text-align: left;"><span style="color: inherit;">all is now</span></div>
</div>

​

在尝试了一下编辑器的特性之后，这可能会变得相当复杂。另外，我很高兴能找到一个类似的javascript svg富文本编辑器，它可以直接创建原生WIWhSWYG，但到目前为止我还没有找到任何东西。

任何指针都非常感谢。

更新:虽然我仍然在寻找一个完整的解决方案，但我现在正在试验http://quilljs.com/，它看起来非常有前途，因为它至少为你做了一半的工作。它有一个非常方便的API，通过这个API，您可以将当前文本的所有格式信息表示为文本/格式对象数组(在它自己的术语中称为Deltas )。这些增量是创建所需SVG文本的一个非常好的起点，特别是当您像我这样只需要常见富编辑器特性的一小部分时。

Answer 1

看见

http://quotemirror.com/lab/quilljsGoesSVG/

用于将quilljs.com编辑器输入转换为svg的未经打磨的概念验证技巧。只实现了几个基本的编辑器功能。这个实现的关键是使用格式化编辑器输入的抽象表示--增量--这是quilljs.com通过其出色的应用程序接口提供的。这个演示可能有be，但它的目的是展示实现这一点的一种方法。

​

​

Answer 2

如上所述，另一个例子。内容可编辑div.这就是生成包括标题在内的整个区域的SVG，但是您可以配置JS来格式化您喜欢的任何DIV。

http://www.cloudformatter.com/CSS2Pdf.Demos.TryIt

我们现在只需要下载，选择download按钮并选择SVG。

这个页面上的大多数演示都是以相同的方式工作的。我们只讨论插入到其他SVG中的SVG的大小特征(对于图表演示)。

网站在左侧，SVG结果在右侧，如下图所示。

​

​