SVG でメニュー作成

前書き

CSS3 になってパスに沿ったテキストの配置ができるようになったようです。
そのためのジェネレーターも公開されているようです。
CSSWARP

そんな状況ですが、パス上にテキストを配置してのメニュー作りを、SVG を使って試してみたいと思います。

はじめに

SVG エリアを確保します。

<svg width='100%' height='200px' viewBox='0 0 200 200'>
</svg>
svg{
    border:1px dotted #aaa;
}

メニューの大きさを適当に決めて、目印として淡い矩形を作ります。

<svg width='100%' height='200px' viewBox='0 0 200 200'>
    <rect x='0' y='0' width='200' height='200' fill='#d3cbc6' />
</svg>

ここまでで、200px * 200px の SVG 領域の確保ができました。
サンプルなのでサイズは適当です。

Inkscape でパスを作る

パスの作成は色々な方法があると思いますが、今回は Inkscape で作成してみたいと思います。

ドキュメントのサイズはメニューのサイズに合わせておくとパスの調整が行い易いと思います。

ドキュメントの設定

次にパスを適当に引きます。
位置の修正は translate を使って行いますので気にしなくても大丈夫です。
パスのサイズと形状にこだわりましょう。

適当なパスを引く

センタリングを行うのであればコントロールポイントを幅いっぱいに配置してあげるのがよいでしょう。

最後に XML エディタを用いてパスデータを抜き出します。

130405_02

以上でパスデータの作成ができました。

パス上に文字を置く

先ほどのパスを SVG に追加します。

<path id='textPath' d='m 23,43.5 c 56,-25 101.5,52 155.5,19' />

テキストをパスに配置する際に必要なので、id の設定をしてあげましょう。

最後に隠してしまうのでスタイルは設定していません。

引き続きテキストを追加します。

<text>
    <textPath xlink:href='#textPath'>Sample Menu 1<textPath>
</text>

この辺りを参考にしています。

ついでに defs タグでくくってパスを隠してしまいます。

<defs>
    <path id='textPath' d='m 23,43.5 c 56,-25 101.5,52 155.5,19' />
</defs>
Sample Menu 1

ここまででパス上への配置が完了しました。

ついでにセンタリングをしてみましょう。

<textPath xlink:href='#textPath' startoffset='50%' text-anchor='middle'>
Sample Menu 1

カーブが浅すぎたためクネクネの効果が薄くなってしまいました。

あと二個追加してみる

Sample Menu 1 Sample Menu 2 Sample Menu 3

SVG の当たり判定は矩形(バウンディングボックスの範囲)で設定されているようなので、リンクが重なりあってしまうような複雑な組み合わせで使うのは難しいようです。

<svg width='100%' height='200px' viewBox='0 0 200 200' style='background:#eae5e3;'>
    <defs>
        <path id='textPath' d='m 23,43.5 c 56,-25 101.5,52 155.5,19' />
    </defs>
    <g transform='translate(0,15)'>
        <text>
            <textPath xlink:href='#textPath'>
                <a xlink:href=''>Sample Menu 1</a>
            </textPath>
        </text>
        <text transform='translate(0,30)'>
            <textPath xlink:href='#textPath' startoffset='50%' text-anchor='middle'>
                <a xlink:href=''>Sample Menu 2</a>
            </textPath>
        </text>
        <text transform='translate(0,60)'>
            <textPath xlink:href='#textPath' startoffset='100%' text-anchor='end'>
                <a xlink:href=''>Sample Menu 3</a>
            </textPath>
        </text>
    </g>
</svg>

最初の読みが甘かったのでたくさん調整することになりました。

<style>
svg a{
    fill:#xxxxxx;
}
svg a:hover{
    fill:#xxxxxx;
}
</style>

スタイルシートから SVG のフォントに色をつける場合は、color ではなく fill を用います。

おわり

一本の長いパス上に複数のリンクを配置するほうが簡単だったかなと思いつつ、これ以上アイデアを膨らませることもできませんので、今回はここまでです。