web-dev-qa-db-ja.com

javascript / jqueryを使用してhtmlをsvgに変換する

Htmlスニペットをsvgに変換する方法はありますか？

例えば： <b>This is bolded</b>

上記のhtmlスニペットを使用してsvgドキュメントを作成したい...これは可能ですか？

javascriptjqueryhtmlsvg
15
FoGy

求めているように見えることを直接実装するのは難しいため、質問を編集して、達成しようとしている実際のユースケースと目標を説明することをお勧めします（以下を参照）。 SVG-in-XHTML または XHTML-in-SVG （たとえば、 this ）のいくつかの組み合わせは、あなたが望むものを与える可能性がはるかに高くなります欲しいです。

私たちは、あなたが目標を達成するためにあなたが考えた特定の実装を解決するのを手伝ってくれるように頼むのではなく、あなたがあなたの目標を教えてくれた場合にのみあなたがあなたの目標を達成するのを助けることができます。

上で述べたように、あなたが提案したことを行う簡単な方法はありません。特に、HTMLには、SVGには存在しない、自動行折り返し、浮動および一般的な配置の概念、および明示的なzインデックスがあります。

ただし、次の狂気はほとんど機能します。

  • ページにiframeまたはdivを作成し、HTMLをスニペットに設定します。
  • すべての要素をループし、テキスト内のすべての単語を_margin:0;padding:0;border:0_スパンでラップします。
  • すべての要素（作成したスパンを含む）をループして、ページ上の絶対位置を計算します。 （jQueryにはこれを行うメソッドがあります。または、offsetLeft/offsetTopとoffsetParentの組み合わせを使用して、配置されたツリーを上に移動し、自分で計算することもできます。）
    • ツリーを上ってgetComputedStyle()を使用し、ローカルz-indexのチェーンを作成して、各要素の同等のz-indexを計算します。
    • これらの要素ごとに、絶対位置を使用してSVGで同等の要素を作成します。
  • Zインデックスの階層によって作成したSVG要素を再ソートします。
7
Phrogz

これを確認してください htmlからSVGへのデモ 、（商用製品であるHiQPDFを使用）。 C＃とVB.NETのコードサンプルがあります。要求に応じて、URLまたはHTMLコードスニペットを変換できます。

4
user1589151

Htmlをcanvasに変換するJSライブラリがあります： http://html2canvas.hertzen.com/ しかし、今まで、svgに似たものは見つかりませんでした。

3
Przemyslaw