ホームページ制作しているとき、あるコンテンツの背景画像にsvgファイルを用意してあてはめ、レスポンシブ対応のためコンテンツのサイズ変化に併せて変化させてみようとしたら、まさかの縦横が比例して変化する。
縦横自由に動く形にしたいのだが、どうしても比例してしまう。
svgってこういうものなのか？
pngやjpgなどのイメージファイルと同じ扱いにはできないのかな？
調べると、デフォルトでは縦横個別で動かすことはできないんだそう。
ファイルそのものに自由に変わって良いよという設定をしなくてはならないんだそう。
そういうことなので、まずはsvgファイルをテキストエディタなどで開く。
そして、「preserveAspectRatio=“none”」という一文を、svgタグ内に追加し、保存する。
// 例
<svg width="324" height="231" viewBox="0 0 324 231" fill="none" xmlns="http://www.w3.org/2000/svg">
↓
<svg width="324" height="231" viewBox="0 0 324 231" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
これでcssでのbackgroundプロパティでurlの値でファイルを指定し、background-sizeの値を縦横別々で指定すると変化するはず。
画像と同じ扱いで操作しててなかなか変化しなかったため、いつのまにHTML仕様が変わったのかと焦った。