FC2ブログ

SVGで多角形を簡単に描く

お久しぶりです。

前に書いたJavascriptができてたので紹介を。

「SVG-JS」といいます。

今のところは正多角形と星型を(SVGの基本図形のような感覚で)作ることができます。

●使い方
まず使いたいHTMLのヘッダで以下のようにjsファイルを読み込みます。

<script src="./SVG-JS.js"></script>

諸般の都合でクラス名(要素にclass属性で指定された文字列)から検索して要素を取得するためにHTML5で導入された規格に基づくメソッド(getElementsByClassName)を使用しています。
これからHTML5規格準拠のブラウザが普及するにつれて問題なくなると考えていますが、当然古いブラウザでは動作しません。もしそのようなブラウザもサポートする場合は「prototype.js」を以下のように読み込んでください。

<script src="./prototype.js"></script>

prototype.jsはprototypejs.orgからダウンロードできます。
SVG-JS.js本体はこちらから。

またSVGファイルを別に作ってobject要素などでHTMLに埋め込む場合は、SVGはXMLなので次のようにします:
<script xlink:href="./prototype.js"></script>
<script xlink:href="./SVG-JS.js"></script>

href属性ではなく、xlink:href属性であることに注意してください。
実際のSVG内には以下のように記述します。

正多角形の場合:
<g class="rpoly" num="5" r="100" stroke="#000000" stroke-width="1" fill="none"></g>

星型の場合:
<g class="star" num="5" inr="40" outr="100"></g>

rpoly(RegulerPOLYgon)とstarともに、頂点の数はnum属性で指定します。

rpolyのほうは半径としてr属性を指定するとその半径の円に内接する正多角形を描きます。

starの方は、二つ半径があってinrが内側の半径を、outrが外側の半径を表します。そうなる必然的な理由は特にありませんがinrは基本的に必須指定です。outrは省略すると自動的にinrの倍が指定されます。

ちなみに特段内側と外側というのに意味はありません。outrをinrより小さくすればそうなります。

あとinrやoutr、r属性に指定する値は単位を付けないでください。パーセント(%)指定などは使えません。ごめんなさい。

上以外のプレゼンテーション属性(strokeなど)は基本図形(rect要素など)とまったく変わりません。

描画される中心の位置がそのままではSVGの(0,0)の位置になるので、transform属性で移動して利用してください。傾きの角度なども同じです。

サンプルファイルを置いておきます。SVG規格準拠のSMILアニメーションを利用していますが<g>要素の子要素で指定した通りのアニメーションが基本図形などと同様に利用できているのがわかると思います。



ぷち情報ですが、上のようにobject要素を使って外部SVGを読み込むと、Safariでもアニメーションが動くというメリットがあります(2013/5/17現在:Safari5.1.7WindowsVistaで確認)。ほかのメジャーなブラウザ、Opera(Presto)とFireFox(Gecko)ではほぼ見た目に差はありません。InternetExplorer9ではMicrosoftの公表通り、インライン及びobject埋め込みともにアニメーションは動きません。
もちろんSVG-JS.jsはjavascriptが有効になっていれば動作します。
スポンサーサイト



コメント

非公開コメント

プロフィール

f(t)=k

Author:f(t)=k
ベクトル画像をもっと世に広めたい一般人その1

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR