[css]svgファイルの縦横比を非固定にする方法

背景画像として使いたい時とか、横に引き伸ばしたいなーとかあるじゃないですか。
jpgとかpngとかの画像はスタイルをいじるだけで縦横比好きにできるけど、svgはそうはいかない。

方法

svgファイルをエディタで開いて以下の内容を足す。

<svg preserveAspectRatio="none" >

足したら問題なくいじれる。

追記:20201211

背景色とか背景画像を斜めで割りたいなら塗りつぶしの色の三角形を::beforeとか::afterで作ってwidth:100%で配置すればいいんじゃないのって思った。

コメント

タイトルとURLをコピーしました