SVGを使って丸角ボックス

始めに書いておくけど

• IEでは動きません。表示すら出来ないでしょう。
• Firefox2.0.0.1 でも動きません。
• Opera,Safari, etc... は未確認
• FIrefox 3.0α2 (Grand Paradiso)でのみ動作を確認してます。

それでも見たければ以下からどうぞ。

• SVGで丸角ボックス

やっている事は

1. 要素をクラス名で取得
   • document.getElementsByClassNameを使用
2. 各要素に丸角ボックスを加える
   • 丸角ボックスはSVGのrect要素を使用
   • 要素の子を新たなdiv要素の子とし、SVGのforeignObjectにappend

という事で動作に必要な環境は

• MIME-Type:application/xhtml+xmlに対応している事
• JavaScriptでdocument.getElementByClassNameが存在する事
• SVGをサポートしている事
• SVGのforeignObject要素をサポートしている事

あたりかな。