Question

我的html主体中有一个svg元素：

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

在里面我有一个包含其他元素的组。事情是我的组的总高度是400px，它位于svg的中间，这留下了600px（顶部300px，底部300x）的空白空间。

有没有办法以某种方式删除占用我页面的空白空间而没有任何需要？

Answer 1

viewBox

使用viewBox="x y wx wy"，您可以定义渲染区域的左上角（x / y），以及宽度和高度（wx / wy）。

也许一个例子证明了这一点：

＆＃13;

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

＆＃13;

Answer 2

根据SVG的结构，您可能正在寻找viewbox属性。

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>

切断顶部和/或底部pf SVG元素

2 个答案: