SVG 内联到 HTML - 调整宽度答案

【问题标题】：SVG inline to HTML - resize to widthSVG 内联到 HTML - 调整宽度
【发布时间】：2021-07-21 17:37:18
【问题描述】：

如果我在 HTML 中嵌入 svg 图片，它会随着浏览器宽度的变化（缩小和扩大）而调整大小，并且图片会停留在页面顶部。

如果我内联相同的 svg，我会遇到问题。当我缩小浏览器的宽度时，图像会随之缩小，但图像会在页面中向下移动。

你可以在this fiddle看到我的意思

由于图像需要与某些嵌入的 svg 保持相同的相对位置，因此向下移动页面是一个问题。

<!DOCTYPE html>
<html>
<head>
<style>
svg{
  position: absolute;
  left: 1px;
  top: 1px;   
  width:100%;
}
#externalSVG{
  position: absolute;
  left: 1px;
  top: 1px; 
  width:100%;
}
</style>
</head>
<body>
<svg width="960.42" height="444.28" version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>
<embed id="externalSVG" src="embed.svg" >
</body>
</html>

大概我误解了一些关于布局的东西。有什么想法吗？

【问题讨论】：

移除 svg 的 height 属性。您还可以删除宽度属性和宽度的 css 规则，因为没有宽度和高度的 svg 元素将默认采用所有可用宽度

标签： svg resize width inline

【解决方案1】：

阅读viewBox 属性的作用，以及它如何与width 和height 交互。

如果您的 SVG 具有 viewBox，则其内容将被缩放以适应 SVG 中指定的 width 和 height。并且还将（默认情况下）在该“视口矩形”中水平和垂直居中（由宽度和高度指定）

您的 SVG 指定了 width 的 "960.42" 和 "444.28" 的高度。但是，您将宽度覆盖到 "100%"。

这意味着当您将页面缩小到 200 像素时，宽度将变为 200 像素，但高度将保持在 444.28。结果是 SVG 垂直居中的又高又窄的视口。见下文。

svg {
  width: 200px;
  height: 444.28px;
  background-color: linen;
}

<svg version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>

最简单的解决方案是从 SVG 中删除 width 和 height 属性。如果您这样做，那么浏览器将自动计算 SVG 的正确高度，使其保持 viewBox 中指定的 254:117 宽高比。

svg{
  position: absolute;
  left: 1px;
  top: 1px;   
  width: 100%;
  background-color: linen;
}

<svg version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>

【讨论】：