切斷頂部和/或底部PF SVG元素

Question

我的SVG元素在我的HTML體：

<svg height="1000px">...</svg> 

在內心裏具有包含其他元素的基團。問題是我的組的總高度是400px，它位於svg的中間，這使得我的空白空間爲600px（頂部300px，底部300x）。

有沒有辦法以某種方式刪除佔用我的網頁沒有任何需要的空白空間？

Answer 1

取決於你可能尋找viewbox屬性SVG的結構。

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

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）。

也許一個例子說明了這一點最好：

<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>