0

Raphael がクリック可能な SVG マップを生成するために使用する JS オブジェクトがあります。いくつかのパスを変更する必要があります。ユーザーフレンドリーな方法でそれを行うために使用できるツールはありますか? 試行錯誤のテクニックを使用して数字をいじりたくありません。パス/アンカーポイントをドラッグアンドドロップしたいのです。どうにかして座標を Illustrator/Dreamweaver/その他のツールにインポートできますか?

ありがとうございました。

JS オブジェクトは次のようになります。

map.coords   = [
{ type:"path" ,id:"K15" ,d:"/*edited out*/"},
{ type:"rect" ,id:"K14" ,x:"496" ,y:"386" ,width:"9" ,height:"5"}
];

マークアップは次のようになります (Raphael が生成したマークアップがsvg要素内にある場合):

<div style="position: relative;">
    <div id="mapOverlay" style="position: absolute; top: 0; left: 0; z-index: 2">
    <svg height="777" width="777" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <desc>Created with Raphaël</desc>
        <defs></defs>
        <path fill-opacity="0" stroke-width="0.25" style="stroke-width: 0.25; fill-opacity: 0;" d="[/*edited out*/]" stroke="#000000" fill="#000000"></path>
    </svg>
    </div>
<img src="map.jpg" alt="Interactive Map">
</div>
4

1 に答える 1

1

質問に対するKevinNielsenのコメントは完全に実行可能なアプローチですが、待っている間、Illustratorでそれを行う方法を見つけました。方法は次のとおりです。

  1. タグの内容全体をヤンクして<svg>、別のファイルとして保存します

  2. これをファイルの先頭に追加します。

    <？xml version = "1.0" encoding = "utf-8"？> <！DOCTYPE svg PUBLIC "-// W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG /1.1/DTD/svg11.dtd">

  3. Illustratorファイル->開く。開かない場合は、W3バリデーターを実行して、何が問題になっているのかを確認できます。設定でドキュメントタイプとしてSVG1.1を指定していることを確認してください。

  4. 次に、Illustratorで[ファイル]-> [配置]コマンドを使用して、任意の画像を重ね合わせることができます（同じサイズの場合が最適です）。
于 2012-10-22T20:26:06.113 に答える