CSS to AI/vector

Question

我正在使用css/js構建傳單生成器。我想將最終產品輸出到分層的ai/vector。有SVG，但我並不熟悉它足以說明它是否可以使用。任何人都有什麼可以探索實現這一目標的建議？服務器將是節點，我期望服務器端處理。到目前爲止，去PDF是一種選擇，但還沒有找到如何告訴它的圖層（我承認我沒有深入地看過它 - 只是試圖得到一般的看法）

Answer 1

如果你'重新定位向量輸出，那麼SVG絕對是一個不錯的選擇。但是，它似乎你想先使用HTML，然後將其轉換爲一些矢量格式。使用JavaScript直接在瀏覽器中生成和操作SVG可能是避免轉換過程中出現麻煩的更好選擇，但該轉換可能看起來像。您可以使用標準的DOM方法來操作SVG，也可以使用類似Raphaël的庫。但有一些注意事項：

• 由於SVG 1.2的<textArea>元素尚未得到廣泛支持，所以您必須親自處理文本換行符。
• 要使文本左右對齊必須注意使用word-spacing property，需要在文本被操縱時進行調整。您必須使用getBBox()方法檢查文本長度，並且每次重新計算字距。
• SVG沒有動態迴流。位置不會因其他元素的寬度/高度而改變。爲了生成傳單這樣的東西，這可能被認爲是更好的選擇，因爲一些小的變化不會破壞整個「頁面」佈局。
• SVG不支持使SVG文本可編輯爲la contenteditable="true"。

一個可能的解決方法考慮<textArea>提到的侷限性，對齊文本和可編輯的文本是使用HTML裏面SVG爲<foreignObject>，只有那些轉化到實際SVG作爲最後一步。

在SVG中，使用<g>（「組」）元素實現圖層。