Hatena::ブログ(Diary)

by edvakf in hatena

2008-08-01

Operaで丸角を実現するCSSを試してみた (解決)

↑こういう記事を見つけたので、前に見た丸角CSSを試してみた。

要は、OperaにはFirefoxSafariのようなCSSのborder-radiusがないので、丸角なSVG画像を作ってそれを設置するという方法。

まずborder.svgというファイルをこんな感じで作り、

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" rx="2em" ry="2em" fill="#E4F2FD" stroke="#dddddd" stroke-width="1"/>
</svg>

それをCSSから指定する。

background:url(border.svg)

するとこんなふうになる。

f:id:edvakf:20080801002937p:image:w400

(このテストページからスクリーンショットを撮った)


これじゃあファイルが二つになって気持悪いので、data:スキームURLで指定すりゃあいいじゃん、と思ってこんな感じにしてみた。

background:url(data:image/svg+xml,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100%" height="100%" rx="2em" ry="2em" fill="#E4F2FD" stroke="#dddddd" stroke-width="1"/></svg>)

ところがこの場合は丸角にはしてくれないし枠線 (stroke) も無視されている。何故?

あ、これはその前に背景色を指定してるからなのか。ということはこのSVG自体が適用されてないのか。

f:id:edvakf:20080801003753p:image:w400

それからimage/svg+xmlって書くのとimage/svg-xmlって書くのとどう違うの?


Base64エンコードしてやると、めでたく丸角になった。

background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJ4PSIyZW0iIHJ5PSIyZW0iIGZpbGw9IiNFNEYyRkQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+)

いよいよ分からなくなってきました。どうしてBase64で書くのとテキストで書くのと違いがあるのだろう?


ところでこのテストページ、SafariやFirefoxで開くとborder-radiusを使った方法で表示される。こんな感じ。

f:id:edvakf:20080801005327p:image

Operaで見るとこんな感じ。

f:id:edvakf:20080801010157p:image

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


ネタ元のページには、特定ブラウザだけをターゲットにCSSを適用させるおもしろい方法へのリンクもあったのだが、今見たらページがない (おそらく一時的) ので、Googleキャッシュだけ紹介しておく。


ブックマークコメントで以下のような指摘があったので、SVGをエスケープしてみた。

url( ) 内で空白や"があるのがCSS構文上問題だったのでは。

これで万事解決したようです。

data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%222em%22%20ry%3D%222em%22%20fill%3D%22%23E4F2FD%22%20stroke%3D%22%23dddddd%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E

ヨモツさんからの返事の記事。

汚く見えるのはwidthとstroke-widthの指定を上手くやれば防げるらしい。

takenspctakenspc 2008/08/01 20:10 > image/svg+xmlって書くのとimage/svg-xmlって書くのとどう違うの?

image/svg-xml は初期に使われていた MIME Type ですが、その後 image/svg+xml に変更されました。
http://support.adobe.com/devsup/devsup.nsf/docs/50809.htm
W3C の勧告では一貫して image/svg+xml です。
# image/svg-xml では SVG だと認識しない実装もあります。例えば、Firefox とか…

edvakfedvakf 2008/08/02 01:57 ありがとうございます。OperaのMIMEタイプ一覧を見ると両方あるので、Operaは両方サポートしているみたいですね。2000年の11月に変更された書式をサポートするってのもどうかと思いますが。

名無しさん名無しさん 2010/02/01 04:44 > SVGで作ったものはネイティブのCSSのborder-radiusより若干汚い。

> <rect x="0" y="0"
の部分を、0.5 などに変えて確認してはいかかが?
以前自分も似たようなことをやっていた経験からすると。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証