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

Opera

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

要は、OperaにはFirefoxやSafariのような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)

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

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


これじゃあファイルが二つになって気持悪いので、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自体が適用されてないのか。

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


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

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

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


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

Operaで見るとこんな感じ。

気にならないレベルではあるが、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の指定を上手くやれば防げるらしい。