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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)