使用viewBox片段裁剪远程SVG后，如何去除留白并修改尺寸？

你通过svgView(viewBox(...))裁剪SVG后出现留白，核心原因是外部SVG的原始width/height属性并未改变，<img>元素默认会按SVG的原始尺寸渲染，仅显示viewBox指定的区域。要让图片只展示裁剪后的区域，可通过以下两种方式处理：

方法一：直接给<img>设置裁剪区域对应的宽高 #

你的viewBox参数是(0,85,80,270)，即裁剪区域宽80、高270，直接给<img>添加width和height属性即可：

<img 
  src="https://www.yr.no/en/content/2-6615464/meteogram.svg#svgView(viewBox(0,85,80,270))"
  width="80"
  height="270"
  style="border: 2px solid black;"
>

这样<img>会直接按裁剪后的尺寸渲染，不会出现留白。

方法二：用CSS强制约束图片尺寸 #

如果需要响应式场景，可通过CSS指定尺寸，配合object-fit: contain确保裁剪区域完整显示：

img {
  border: 2px solid black;
  width: 80px;
  height: 270px;
  object-fit: contain;
}

<img src="https://www.yr.no/en/content/2-6615464/meteogram.svg#svgView(viewBox(0,85,80,270))">

补充说明 #

由于加载的是外部SVG，无法直接修改它的width/height属性，只能通过<img>自身属性或CSS覆盖渲染尺寸。svgView片段标识符仅控制SVG内部显示的区域，不会改变SVG本身的固有尺寸，这就是留白出现的根本原因。

内容的提问来源于stack exchange，提问作者amandasystems