cssのみを使ってsvgコンテンツのサイズを変更するには？

Question

インラインSVGベクトル作品のサイズを変更するにはCSSのみを使用しているため、すべてのアートワークのサイズが変更され、より小さい定義済みの幅&の高さに完全にフィットしますか？元のアスペクト比は維持すべきである。この場合、100x100pxボックスにアートワークのコンテンツをアイコンとしてサイズ変更します。スニペットの下では、内部コンテンツのサイズを変更するのではなく、ウィンドウを切り取っているように見えます。

svg { 
 
    width: 100px; 
 
    height: 100px; 
 
    fill: blue; 
 
    background-color: red; 
 
}

<svg> 
 
\t <polygon points="100,0 30,200 200,70 0,70 170,200"/> 
 
</svg> 
 

 
<svg > 
 
\t <polygon points="0,0 200,140 110,200"/> 
 
</svg> 
 

 
<svg> 
 
\t <ellipse cx="200" cy="70" rx="200" ry="40" /> 
 
</svg>

Answer 1

アスペクト比を維持し、SVGの容器を充填するために、100％の高さと幅を設定するビューボックスを追加します。この上のさび

svg{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color: red; 
 
} 
 
svg * { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: blue; 
 
}

<svg viewbox="0 0 200 200"> 
 
    <polygon points="100,0 30,200 200,70 0,70 170,200"/> 
 
</svg> 
 

 
<svg viewbox="0 0 200 200"> 
 
    <polygon points="0,0 200,140 110,200"/> 
 
</svg> 
 

 
<svg viewbox="0 0 400 70"> 
 
    <ellipse cx="200" cy="70" rx="200" ry="40" /> 
 
</svg>