6

Adobe Illustratorのパスから正確な座標を見つけてHTML画像マップで使用しようとしていますが、パスをSVGファイルとして保存するように提案されましたが、メモ帳でSVGを開くと次のように表示されます。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.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="300.96px" height="248.16px" viewBox="0 0 300.96 248.16" enable-background="new 0 0 300.96 248.16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M81.6,152.64c7.519,0,15.041,0,22.56,0
    c-0.64,2.88-1.28,5.76-1.92,8.64c-0.16,2.4-0.32,4.8-0.48,7.2c-0.16,0-0.32,0-0.48,0c0,2.56,0,5.121,0,7.68
    c-0.659,2.333,0.264,6.49-0.48,9.12c-0.16,0-0.32,0-0.48,0c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0
    c-0.584,2.076,0.248,5.349,0.48,6.72c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0c-0.364,1.869,0.809,1.523,0.96,1.92
    c0.56,1.47-0.759,3.551-0.96,4.32c0.16,1.12,0.32,2.24,0.48,3.36c0.16,0,0.32,0,0.48,0c0.488,1.604-0.283,3.241-0.48,4.32
    c-0.96-0.16-1.92-0.32-2.88-0.48c-0.48,1.44-0.96,2.88-1.44,4.32c0,0.8,0,1.6,0,2.4c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36
    c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36c-0.16,0-0.32,0-0.48,0c0.16,2.24,0.32,4.48,0.48,6.72c-0.16,0-0.32,0-0.48,0
    c0,0.64,0,1.28,0,1.92c-0.16,0-0.32,0-0.48,0c0,0.32,0,0.64,0,0.96c-0.32,0.16-0.64,0.32-0.96,0.48c0,0.32,0,0.64,0,0.96
    c-0.32,0.16-0.64,0.32-0.96,0.48c-0.451,1.146,1.519,3.296,0,4.32c-0.32,0-0.64,0-0.96,0c-1.875,2.142-4.972,1.148-7.2,0.48
    c-2.72,0-5.44,0-8.16,0c-0.933-1.886-1.007-2.403-3.84-2.4c0-0.48,0-0.96,0-1.44c1.326-0.347,1.074-0.134,1.44-1.44
    c0.16,0,0.32,0,0.48,0c0-0.64,0-1.28,0-1.92c0.16,0,0.32,0,0.48,0c0.32-1.76,0.64-3.52,0.96-5.28c-0.48-0.16-0.96-0.32-1.44-0.48
    c-0.16-0.8-0.32-1.6-0.48-2.4c-1.045-0.202-1.367-0.318-1.92-0.96c1.975-1.655,1.015-4.196,1.92-6.72c2.88-0.64,5.76-1.28,8.64-1.92
    c0.633-2.939,2.051-6.325,2.88-9.12c0.455-1.531-0.247-3.995-0.48-4.8c-0.32-3.199-0.64-6.4-0.96-9.6c0-1.027,0.48-0.96,0.48-0.96
    c-0.16-5.6-0.32-11.201-0.48-16.8c0-2.879,0-5.76,0-8.64c-0.16,0-0.32,0-0.48,0c0-1.6,0-3.2,0-4.8c-0.16,0-0.32,0-0.48,0
    c0-1.76,0-3.52,0-5.28C81.954,157.702,81.619,155.542,81.6,152.64z"/>
</svg>

このXMLデータから座標を抽出してHTML画像マップで使用できるようにする方法を教えてもらえますか？私は明らかにXMLファイルの解析の経験がなく、そのためのスクリプトの準備をどこから始めればよいのかわかりません。

前もって感謝します！

4

1 に答える 1

9

SVG について最初に知っておくべきことは、パスの構成方法です。

「d」属性には、パスを作成するための仕様が含まれています。各コマンドは、次の文字に一致する文字で始まります。

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

パスはIllustratorによって生成されたため、少し複雑です。とにかくM81.6,152.64が最初のステップであり、レンダリングにカーソルをそこに配置するように指示します。

次に、描画を開始します: c7.519,0,15.041,0,22.56,0。これは「カーブする」ことを意味し、4 つの数値は 3 次ベジエ曲線を生成するための値です (詳細については、こちらを参照してください)。

パスには多くの曲線 ('c' と 4 つの数字) があり、'z' で終わります。これは、'パスを閉じる' という意味です。

あなたは何ができますか？たとえば、パス タグの属性 'd' をxml javascript parserで解析できます (または、ファイルの内容を文字列として解析し、属性 d="" の内容を検索するだけです)。パスの原点を取得できる文字列。

パスを表示したい場合は、javascript でリアルタイムにレンダリングします。raphael.jsを使用できます。ここでわかるように、パスを作成するには属性「d」のような文字列が必要です。ラファエルを使用すると、HTML イメージ マップよりもイベントが関連付けられたオブジェクトを作成する方が簡単でしょう。

描画の各ポイントを抽出したい場合、SVG パスはそのようには機能しません。xml からすべてのポイントの高さと幅だけを取得できます。画像に raphael svg パスを重ねることをお勧めします。

于 2012-10-22T14:38:14.987 に答える