CSS到AI / vector

Question

我正在使用css / js构建一个传单生成器。我想将最终产品输出到分层的ai / vector。有SVG，但我不熟悉它，告诉它是否可以使用。任何人都有关于我可以探索实现这一目标的建议吗？服务器将是Node，我当然希望服务器端处理。到目前为止，PDF是一个选项，但还没有找到如何分辨它（我承认我没有深入研究它 - 只是试图获得一般视图）

Answer 1

如果您的目标是矢量输出，那么SVG绝对是一个不错的选择。但是，您似乎想首先使用HTML然后将其转换为某种矢量格式。使用JavaScript直接在浏览器中生成和操作SVG可能是一个更好的选择，可以避免转换过程中的麻烦，但转换可能看起来像。您可以使用标准DOM方法来操作SVG，也可以使用像Raphaël这样的库。但是有一些警告：

• 您必须自己处理文本换行符，因为SVG 1.2的<textArea>元素尚未得到广泛支持。
• 在文本被操作时，必须使用需要调整的word-spacing property来使文本左右对齐。您必须使用getBBox()方法检查文本长度，并每次重新计算字间距。
• SVG没有动态回流。位置不会根据其他元素的宽度/高度而改变。为了生成传单之类的东西，这可能被认为是更好的选择，因为一些微小的改变不会破坏整个“页面”布局。
• SVG不支持使用contenteditable="true"编辑SVG文本。

考虑到<textArea>，合理文本和可编辑文本的上述限制的可能解决方法是将SVG内部的HTML用作<foreignObject>，并且只将其转换为真正的SVG作为最后一步。

在SVG中，使用<g>（“group”）元素实现图层。