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

Question

我正在寻找一个可以将格式化的html文本（字体标签，边距等）转换为svg的javascript工具/ lib。我使用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 WIWhSWYG富文本编辑器，它可以直接创建本机svg，但到目前为止我还没有找到任何东西。

任何指针都高度赞赏。

更新： 我正在寻找一个完整的解决方案，我现在正在尝试 http://quilljs.com/ 这看起来很有希望，因为它至少可以为你完成一半的工作。它有一个非常方便的API，您可以通过它来获取当前文本的表示形式及其所有格式信息，作为文本/格式对象的数组（在其自己的术语中称为Deltas）。这些Deltas是创建所需SVG文本的一个非常好的起点，特别是如果您（在我的情况下）只需要一小部分常见的富编辑器功能。

Answer 1

见

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

对于未经证实的概念证明，将quilljs.com编辑器输入转换为svg。只实现了一些基本的编辑器功能。这个实现的关键是使用格式化编辑器输入的抽象表示 - 增量 - quilljs.com通过其奇妙的API提供。这个演示可能是错误的，但是要显示实现这个的一种方法。

Answer 2

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

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

我们现在只有有线下载，选择下载按钮并选择SVG。

此页面上的大多数演示都以相同的方式工作。我们只是通过调整SVG的大小特征来插入到其他SVG中（用于图表演示）。

左侧网站，SVG结果位于右下图。