WebKitでのSVGを背景画像にすると起こるバグ

テクノロジーカテゴリーの変更を依頼記事元:

hail2u.net

26 usersがブックマークコメント

コメント

4

記事へのコメント4件

注目コメント
新着コメント

KatagiriSo svg

html5

2018/11/28 リンク

babydaemons "それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません”

2012/03/27 リンク

cheesesouffle Chrome 17 ではすべて問題ないように見えます。Chrome 15 は確かにおかしい。

2011/12/09 リンク

ethertank SVGを背景画像として使うとあれこれ酷いので擬似要素として挿入…

SVG
css

2011/12/09 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

WebKitでのSVGを背景画像にすると起こるバグ

SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがない... SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的

ブックマークしたユーザー

batta2023/06/10
KatagiriSo2018/11/28
wakuworks2017/03/10
hatano992016/01/31
ajinorichan2015/07/22
yorozuna2014/12/10
touch_web2014/08/07
toshi-kawanishi2014/05/19
donnie280642122014/03/10
itoyu_1102012/03/28
babydaemons2012/03/27
turusuke_02011/12/10
bluespear2011/12/10
rikuo2011/12/09
cheesesouffle2011/12/09
ysk_lucky-star2011/12/09
ethertank2011/12/09

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

設定を変更しましたx