2012年3月9日金曜日

html5の埋込みsvgを使って自由な形のリンクを作る

斜め罫線を作る際,html5の埋め込みsvgを使って直線を引いたのだが,その後でsvgについて調べてみた.すると,次のような機能を持っているようだ.
  • スクリプトに依存しないベクターグラフィックの生成
  • cssによるスタイル付け
  • javascriptによるイベント処理が可能 
  • a要素による外部文書へのリンク
というようにhtml文書と親和性がとても高いように見える.そこでhtmlとsvgのちゃんぽんの記述が出来るんかいな?という素朴な疑問から次のようなサンプルを作ってみた.
すると,セレクタもプロパティもsvg側で対応したものであればsvgの外側のcssから指定できた.一つのスタイル要素で管理できるので嬉しい.

ということはこれまでhtmlだけで作成するのが困難だった機能(ベン図とか組織図とか)をスマートに実現することが出来るってことであって…
ぶっちゃけsvgってのはデザイナーの為のツールという面ももちろんあるけれど,むしろHTML・CSSと並んでプログラマーとかSEに必須な知識となっていくんじゃない?




  • テンプレートとなるsvg要素はdisplay:noneで隠してしまう.
  • テンプレートとなるsvg要素とリンクを表すsvg要素とは要素レベルで分離する.
    これはhtml内の他の場所でテンプレートを共有するため.
  • スタイルシートの:hover擬似クラスはsvg内部の要素にも問題なく動作している.
  • svg内部の要素の取得も,イベントの登録も問題なく動作.
    (domインターフェースはガラリと異なるが)
    [疑問]jQuery等のライブラリとは衝突しないか?

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
   svg#svg-template{
    display:none;
   }
   svg.clickable{
    width:100px;
    height:100px;
    border:solid 1px black;
   }
   svg.clickable use{
    fill:orange;
   }
   svg.clickable use:hover{
    fill:red;
    stroke:blue;
    stroke-width:2px;
   }
  </style>
 </head>
 <script type="text/javascript">
  window.onload = function(){
   var link = document.getElementById("link");
   link.onclick = function(){
    alert("svg内の要素をクリックしました.");
   }
  }
 </script>
 <body>
  <svg id="svg-template">
   <defs>
    <path id="tmpl" d="M 50 50 h 48 a 48,48 0 1,0 -48,48 z"/>
   </defs>
  </svg>
  <svg class="clickable">
   <a xlink:href="#">
    <use id="link" xlink:href="#tmpl"/>
   </a>
  </svg>
 </body>
</html>

0 件のコメント:

コメントを投稿