メディアクエリに応じてsvgサイズを変更します

Question

<svg width='1175' height='400'> 

メディアクエリでsvg imgの幅と高さを変更するにはどうすればよいですか？

@media only screen and (min-width: 1680px) { 
    svg{ 
     width:1720; 
     height:400; 
     } 
} 

これは機能しません。

Answer 1

あなたはタイプミスがあります：欠落している「}」があります。 また、使用する場合は常にpxを宣言する必要があります。いい練習。

Answer 2

widthとheightではなく、あなたのsvgにviewbox attributeを指定してください。この方法で、適切な比率を維持しながら、あなたのsvgのサイズを簡単に適応させることができます。

Answer 3

次のようなメディアクエリで幅と高さを変更できますが、SVGをdiv or viewboxにラップし、ページに応じて反応させるのが理想的です。

@media only screen and (min-width: 1680px) { 
svg{ 
    width:1720px; //or any css units 
    height:400px; //or any css units 
} 
}