从左右两侧裁剪 SVG

【问题标题】：Crop SVG from left & right sides从左右两侧裁剪 SVG
【发布时间】：2019-03-12 18:15:38
【问题描述】：

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

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

由于我在 SVG 中嵌入了 PNG 图像，因此相关图像不需要按比例缩小，原因是我使用 SVG 作为响应式图像映射。

我发现我什至很难解释我想要实现的目标，所以图表时间（对不起！），我希望这只是周一大脑的一个案例，解决方案比我想象的要容易。

【问题讨论】：

如果你希望它保持相同大小但裁剪，不要在外部
很好的插图，让问题易于理解。

标签： css html svg responsive-design

【解决方案1】：

您可以保留viewBox 属性，但如果您在SVG 上设置width 和height 属性，它将保持其大小并且不会随容器缩小。要使包含<div> 的SVG 居中，您需要应用一个小技巧，即将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>

【讨论】：