【SVG】svgのviewBoxでいつもいつもドハマリするので備忘録を残すことにした | web屋tM

世の中カテゴリーの変更を依頼記事元:

webya-tm.com

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

コメント

1

記事へのコメント1件

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

dhrname svg要素のwidth属性とheight属性は、「カメラの液晶画面の幅と高さ」。svg要素のviewBox属性は、「レンズが写す範囲、風景の広さ」。なので、ズームパンしたいときは、preserveAspectRatio='none'で、viewBox属性をいじるとOK

SVG

2018/07/04 リンク

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

規約違反を報告

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

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

アプリをダウンロード

関連記事

【SVG】svgのviewBoxでいつもいつもドハマリするので備忘録を残すことにした | web屋tM

html5からインラインで使えるようになったsvgですが、viewBoxのせいでいつもいつもドハマリします。いま... html5からインラインで使えるようになったsvgですが、viewBoxのせいでいつもいつもドハマリします。いまいちviewBoxの感覚がつかめきれていないせいです。だから、svgについて一度整理しながら、viewBoxについて学ぶことにしました。 svgはxmlだということインラインで使えるようになったとは言え、svgはそもそもhtmlではありません。<svg>タグ内で使っているのはhtml空間とは別空間になるということです。 <html>空間内に<svg>空間という別のものが存在している状態です。イメージ的には上のような感じだと思います。 <svg>～</svg>で作られた場所は<html>から切り離された別空間だということを意識しなきゃです。そして、その別空間こそxml世界。 widthとheightが大切だったさて、<svg>で区切られたところは<html>ではなくなって

SVG

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

dhrname2018/07/04

同じサイトの新着

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

いま人気の記事

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

いま人気の記事 - 世の中

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

新着記事 - 世の中

新着記事 - 世の中をもっと読む

設定を変更しましたx