4

Illustrator で「SVG として保存」した場合の典型的な結果は次のとおりです。

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;"
     xml:space="preserve">
<g id="symbol1" ... >
   <path ... />
   <path ... />
   <path ... />
</g>
</svg>

HTML と同様の方法で SVG を使用できる JavaScript テンプレート ライブラリ (口ひげ、ハンドルバーなど) があるかどうか知りたいです。
これにより、一連の SVG 要素テンプレートを保存し、それらのスタイル属性とコンテンツを動的に設定できます ...

4

2 に答える 2

0

「[using] SVG を HTML と同様の方法で」という意味が明確でないため、それがあなたの質問に答えているかどうかはわかりませんが、Raphaëlと呼ばれる JavaScript ライブラリがあり、SVG グラフィックスを次のように操作できます。HTML ページを操作するためにjQueryを使用するのと似ています。これは、画像をアニメーション化したり、イベント ハンドラーをアタッチしたり、ページ上で色や形をライブで変更したりできることを意味します。(ボーナスは、Raphaël がSVG サポートなしで Internet Explorer 用のVMLを使用することです。) もう 1 つの方法は、jQuery SVGプラグインまたはその他のライブラリを使用することです。

もちろん、SVG は単なるテキスト形式の XML であるため、任意のテンプレート エンジンで動作するはずですが、Raphaël や jQuery SVG などを使用する場合の違いは、それらが基になる XML 形式のソース テキストを操作しないことです。DOM ツリーは、ツリーを変更している間に結果をライブで確認できることを意味するだけでなく、通常は XML を理解しないテンプレート エンジンで XML ソース コードを操作する場合によくある無効なドキュメントの作成がはるかに困難であることを意味します。代わりに、テキストのように扱います。

Illustrator to Raphael JS: A Guideを読み、GitHubで Raphaël SVG Import プラグイン とRaphaël SVG Import Classicの両方を参照 することをお勧めします。

于 2012-07-24T08:54:08.473 に答える
0

https://groups.google.com/forum/#!topic/d3-js/qVZ7hacBGrEによると、アンダースコア テンプレートを使用できます。

フォーラムでは、代替案についても議論しています。

  1. SVG「定義」を作成します
  2. 「use」でsvgオブジェクトを挿入
  3. d3.jsを使用して変更します
  4. 見えるようにする
于 2013-08-20T22:43:51.503 に答える