FC2ブログ

SVGとJavascriptのぐち

微妙にこのブログとは関係ないかもしれませんが、そのうち関係するので愚痴(+備忘録)を...

実は最近、jQuery Mobileというモバイル向けウェブサイトのフレームワークを触り始めたんですが、このフレームワークはJavascriptとCSSを読み込み、リンクなどを通常と同様に設定するだけで自動でボタン等がスマホ風にデザインされるという超便利ツール(それだけじゃありませんが...(-_-;))。

これに着想を得て(というほどでもないですが)、「javascriptを読み込んでおいて、inlineSVGの<g>要素にclass="star"を設定すると星型の<polygon>要素が挿入される」というjavascriptが作れないかと思って試行錯誤していたのです!

つまり...

<html>
  <head>
    <script src="hoge.js"></script>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 400 400">
      <g class="star" num="5" outr="100" inr="50"
         style="stroke:#ff0000;stroke-width:5;fill:none;"
         transform="translate(200 200)" />
      <rect x="0" y="0" width="400" height="400" stroke="#0000ff" fill="none" />
    </svg>
  </body>
</html>
というコードから

というSVGが生成されるというJavascriptが書きたいわけです。

もしこれができれば、後は同様にして正多角形やらなにやらも割と簡単に作れるはず...と思ったんですが、プログラミングって難しいですね...特にJavascriptもさることながらDOMとか...

一番最初にはまったのがcreateElementメソッドで、JavascriptからHTML(SVG)内に要素(<g>とか)を作るにはまずcreateElementメソッドという関数みたいなものを使って要素を作成します。それを必要な場所に挟み込む(こちらはappendChild)ことで実現します。

ところがどっこい今回はHTML要素(HTMLオブジェクト)ではなくてSVG要素(オブジェクト)を作るので、createElementメソッドではなくてcreateElementNSメソッドを使わねばならなかったのです。雰囲気から察するにXML系のマークアップ(XHTMLなど)でもそうなのかもしれないのでXHTMLをバリバリ使う方には常識なのかも知れませんが...

次の問題はまだ検討中の"getElementsByClassName"の問題。このメソッド、実はまだあんまり実装されてない"新しい"メソッドらしい。そもそも"getElementsByClass"と調べると上のメソッドではなくて自作で似たような機能の関数を作るっていう記事が最初に出てくるほど。あとはprototype.jsを使う方法。そのへんをどうするか(非対応ブラウザ切り捨てか・prototype.jsに依存させるか・関数を組み込んでおくか)はまだ検討中...とりあえず実験はprototype.jsを組み込んで続行中←

もうひとつ"getElementsByClassName"ではまったこと。これの返り値ってElementsっていうぐらいだから要素が一つだけ返ってくるわけではなく、複数返ってくるため配列"のようなもの"になっている。この"のようなもの"というのが曲者で、たとえば

stargroup=getElementByClassName("star")
alert(stargroup[0]);
とするとalertで"undefined"とか"null"が返ってくる(どっちが返ってくるかはブラウザや、"stargroup[0]"と"stargroup.item(0)"とでも異なる)。ただ"alert(stargroup.length);"は正しい長さを返してくるので、まったく動いてないわけでもないらしい...というわけで適当な変数に代入してみた。
stargroup=getElementByClassName("star")
var star0 = stargroup[0]
alert(star0);
これでうまくいきました。よくわかりませんが上のように代入してstar0の方をいじってあげるともろもろのプロパティも取得できます。

もう少し時間はかかるかもしれませんが完成すれば、Illustratorのような豊富な基本図形を簡単に使えるようになるかもしれません。

スポンサーサイト



プロフィール

f(t)=k

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

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

この人とブロともになる

QRコード
QR