SVGスケールをX軸でのみ作成する方法は？

Question

次のSVGグラフィックは、ウィンドウのサイズを変更してもアスペクト比が維持されているときに現在スケーリングされています。どのようにしてこれをX軸でのみスケールすることができ、Yを80pxに保つことができますか？

<svg width="100%" viewBox="0 0 300 80"> 
    <rect x="0" y="0" fill="yellow" height="80" width="100"/> 
    <rect x="100" y="0" fill="blue" height="80" width="100"/> 
    <rect x="200" y="0" fill="red" height="80" width="100"/> 
</svg> 

あなたはオプションのカップルを持って、

Answer 1

、ありがとうございました。まず、グラフィックの高さを指定するだけです（例： CSSを使って

svg { 
    height: 80px; 
    width: 100%; 
} 

それはあなたが望む効果はない場合、あなたはpreserveAspectRatio属性を持つ、より洗練され得ることができます。それはあなたが望むものを完全には明らかではありませんので、それは（上記のCSSのアプローチをと仮定すると、それをしません）あなたのために働くだろうか値を言うのは難しいですが、多分何か：

<svg viewBox="0 0 300 80" preserveAspectRatio="none"> 

は、より多くのための参照リンクをご覧ください詳細。