How To Scale SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well! Here, she shares an epic g
レスポンシブなsvgを作ったら背景画像を追加してみよう
svgを単なる画像ファイルだと考えていたら大間違いなんです．そこで今回はsvgに背景画像を追加して，画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します． ※2014/3/22 補足を追加 通常svgグラフィックはサイズ固定な場合が多いのですが，下の作業を行うだけでレスポンシブなsvg（サイズ可変なsvg）に変化します． ルートとなるsvg要素のwidth，height属性を削除する viewBox属性，preserveAspectRatio属性を追加する ただこれだと，画像全体が拡大・縮小されてしまうためグラフィックの一部を固定位置・サイズとしたいケースに対応できません． ところで，svgではcssを使ったスタイル指定が出来ます．であれば，cssのbackground-imageプロパティを利用できないかと考えます．svgグラフィックはルートとなるsvg要素の設定（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
