角丸にするためにライブラリを作ってみる (Opera 用コードの試作)

2008年8月8日 金曜日

Operaで丸角を実現するCSSを試してみた (解決) – by edvakf in hatena さんからトラックバックをいただき、トラックバック先の記事がとても参考になりました。

その記事の内容を参考に Opera でも自動で角丸を実現するための JavaScript ライブラリを作ってみようと思って、すこしそれっぽくなってきました。

作りかけですが、大体こんな感じということで Opera でも角丸を実現するライブラリの途中経過です。

これを作るのにいろいろ試してみた結果、いろいろ勉強になりました。

背景で表示した SVG 全体の大きさは width + (右の stroke-width / 2) + (左の stroke-width / 2) になるみたい。例えばwidth が 100 で、stroke-width が 10 なら 100 + 10 / 5 + 10 / 5 = 110。つまり、width を 100 % にしてしまうと stroke-width の分で 100 % + 10 になっているのでその分が切れてしまう。たぶん、トラックバック先の記事にあった

気にならないレベルではあるが、SVGで作ったものはネイティブのCSSのborder-radiusより若干汚い。

というのも、stroke-width が切れているためみたいです。試しに、SVG の x と y に 1 を設定すると、切れている stroke が切れずに見えるようになりました。

あと、背景で表示する SVG の width を 100 px のように固定している場合、Opera のズーム機能で伸縮しても背景の SVG は伸縮されませんでした。そんなわけで、背景に使う SVG は基本的に % で指定したほうがよさそうです。

これらの結果を Opera で実際に確認できるサンプルを用意しました。

そんなわけで、また時間ができたら続きを作っていきたいと思います。

とてもよいヒントをいただけた edvakf さんに感謝。