お久しぶりです。SVG好きの大根です。
部内でInRoFの練習みたいなことをするときのために、SVG+Javascript+HTML5で大きく残り時間が表示されるタイマを作りました。ので、ここに置いておきます。ナウいブラウザではだいたい動くはず。
タイマは全画面表示にしてモニタに映して使うことを想定していて、すこし離れたところからでもキーボードだけで簡単に操作できます。(これの前のバージョンはマウスでの細かい操作が必要で大変でした)
htmlファイル1つにまとめてあるので、ダウンロードして単体で動かすこともできます。ご自由にお使いください。
作っていて気づいたのですが、SVGで同じ図形を再利用するための<use>要素って、CSSのセレクタでuse内の(非公開木の)要素を選択できないんですね。仕様書にちゃんと書いてありましたが、最初選択できないというのを選択できると読み間違って作って、しかもFirefoxではそれがうまく動いちゃったので面倒なことになってました。
形状は同じで色が違うだとか、基本同じ形だが一部違うというような物を複数作りたい時、SVG1.1では<use>は使えないみたいです。(ただし、fillやstrokeの色の指定が無い場合、useが置かれた環境やuseのattributeからこれが継承されるとか。納得できない。)
SVG2のドラフトを読むと、CSS Scopingという文書を根拠に、::shadowという指定をすることでどうにかできると書いてあるようでしたが、FirefoxでもChromiumでもうまく動かなかったので諦めました(ドラフトだしね)
他にも、useが参照している要素にイベントハンドラを設定すると、useによってコピーされる非公開木の中のノードにもイベントハンドラが設定されて、イベントが発生した時に非公開木の中の要素にjavascriptからアクセスできるというような記述もあったので試してみましたが、うまく動きませんでした。(Firefoxではイベントハンドラが呼ばれない,ChromiumではイベントハンドラからDOM木を変更しても表示が変化しない)
そんなわけで、7segの表示の制御をするために、defした7segのpathは、useは使わずに、javascriptでコピーして使用することにしました。
誰かもっとスタイリッシュなやり方教えて。そもそもタイマを作りたいだけなら見た目までInRoFに似せて7segにする必要がないとか、7seg風フォントがあるとか言うのは知ってるから、SVGを使う方法で。