从左侧和右侧裁剪SVG

Question

对不起，我找不到不需要手动更改视图框的任何现有信息。

我有一个内联SVG，它跨过网页的整个宽度（默认情况下为1920px宽），我想知道是否有一种方法可以裁剪图像而不是缩小图像（我知道这是使用SVG的要点）

当我在SVG中嵌入PNG图像时，相关图像不必按比例缩小，原因是因为我将SVG用作响应图像图。

我发现很难解释我要达到的目标，所以图表时间（抱歉！），我希望这只是星期一的事，解决方案比我想的容易。

Answer 1

您可以保留viewBox属性，但是如果在SVG上设置width和height属性，它将保持其大小并且不会随容器收缩。要将SVG放在包含<div>的中心，您需要应用一些技巧，即将left CSS属性设置为50%，然后使用transform: translate(-50%, 0)将其移回。另外，SVG必须设置position: absolute和容器position: relative。

这是一个有效的示例：

.container {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  height: 160px;
  overflow: hidden;
}

svg {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

<div class="container">
  <svg width="800" height="160" viewBox="0 0 1000 200">  
    <rect x="0" y="0" width="1000" height="200" fill="teal" />
    <circle cx="500" cy="100" r="50" fill="goldenrod" />
  </svg>
</div>