は、私は私のhtml体でSVG要素を持っているトップおよび/またはボトムPF SVG要素

Question

を切り取ります。私のグループの全高は400pxで、それはsvgの中央にあり、空白の空白が600px（上に300px、下に300x）残っています。

何もせずに自分のページを占める空きスペースを削除する方法はありますか？

Answer 1

：

おそらく例では、このベストを示しています。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

ビューボックス属性を使用するには、 グラフィックスの特定のセットは、特定のコンテナ要素に合わせてストレッチすることを指定することができます。

ここでは例です：

body { 
 
    background: #c3c3c3; 
 
} 
 

 
svg { 
 
    border: 1px solid #fff; 
 
}

<svg height="200px" width="200px" fill="#fff" viewbox="0 0 50 50"> 
 
    <g> 
 
    <rect fill="blue" height="50px" width="50px"> 
 
    </g> 
 
</svg> 
 
    
 
<svg height="200px" width="200px" fill="#fff"> 
 
    <g> 
 
    <rect fill="blue" height="50px" width="50px"> 
 
    </g> 
 
</svg>

Answer 2

viewBox。

viewBox="x y wx wy"を使用すると、レンダリング領域の左上隅（x/y）、幅と高さ（wx/wy）を定義できます。あなたはおそらくviewbox属性を探しているSVGの構造によって

<svg width="200" 
 
    height="200" 
 
    viewBox="800 900 200 200" 
 
    style="border: solid 1px #333;"> 
 

 
    <rect x="800" y="900" width="100" height="100" fill="#090" /> 
 
</svg>