(閉じる)

はてなブックマーク > コンピュータ・IT > WebKitでのSVGを背景画像にすると起こるバグ - Webl...

WebKitでのSVGを背景画像にすると起こるバグ - Weblog - hail2u.net

hail2u.net

タグ :

コンピュータ・IT 12 users このエントリーをはてなブックマークに追加

WebKitでのSVGを背景画像にすると起こるバグ - Weblog - hail2u.net

SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば…と思いきや、なかなかの落とし穴がありました。 View Demo: SVG Arrow WebKit以外では自動リサイズ... > このページを見る

最終更新時間: 2011年12月09日06時12分
▼ブログで紹介する

みんなのブックマーク 人気（0） 新着

  • babydaemons babydaemons , ,
    "それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません” 2012/03/27
  • cheesesouffle cheesesouffle
    Chrome 17 ではすべて問題ないように見えます。Chrome 15 は確かにおかしい。 2011/12/09
  • pypupypa pypupypa ,
    SVGのCSSによる背景指定方法 2011/12/09
  • jeffreyfrancesco jeffreyfrancesco ,
    ::before疑似要素のcontentで挿入。とはいえこれはWebkit側で修正して欲しいところだなあ 2011/12/09
  • ethertank ethertank ,
    SVGを背景画像として使うとあれこれ酷いので擬似要素として挿入… 2011/12/09

このブックマーク一覧を非公開にするには?

はてなブックマークを使ってみる(無料)
はてなブックマークって？
はてなブックマークはオンラインでブックマークを管理・共有できる無料サービス。自宅、職場、外出先、どこからでも同じブックマークにアクセスできます。ユーザーはみんなでブックマークを共有して効率良く情報収集しています。あなたもはてなブックマークを始めてみませんか?