dictionary - SVG マップからパス データを抽出して RaphaelJs で使用する

Question

RaphaelJS (例: http://raphaeljs.com/australia.html ) を使用してインタラクティブなマップを構築しようとしています。ソースを確認してください。入力するマップ パス データが必要です。この情報を取得する方法についての明確な説明はどこにもありませんが、illustrator またはinkscape がそれを実行できるという事実以外にはありません。このインドの地図から「州」のパス データを取得しようとしています: http://en.wikipedia.org/wiki/File:India-locator-map-blank.svg

Answer 1

うーん、これは簡単です。SVG は単純な XML ファイルです。そのため、Illustrator を介して何かを「抽出」する必要はありません。

任意のテキスト エディターで SVG を開くだけで、すべてが表示されます。(RaphaelJS パス関数で使用できるパス データ文字列は、パス ノードの d 属性に保持されます)。

他社の SVG ファイルを使用する場合は、著作権の問題に注意してください ;)

スカンク

Answer 2

Ready.Set.Raphaelのようなコンバーターを使用してパスを抽出し、javascript 出力を作成することもできます。それはリアルタイムセーバーです！

Answer 3

古い SVG ファイルの場合、パス データを RaphaelJS 用に最適化する必要があります。Inkspace でファイルを開き、最適化された AVG として保存します。Adobe Illustrator で空白の画像として開く AVG ファイルがある場合は、テキスト エディタでファイルを編集し、viewBox の最初の 2 つの値を 0,0 に設定します。ウィキペディアのマップ AVG ファイルを操作する場合、両方の手順が必要になる場合があります。