SVG 内联到 HTML - 调整宽度

Question

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

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

中明白我的意思

由于图像需要与某些嵌入的 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>

大概是我对布局有一些误解。有什么想法吗？

Answer 1

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

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

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

这意味着当您将页面缩小到 200px 时，宽度将变为 200px，但高度将保持在 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 的正确高度，以便它保持 254:117 width:height 宽高比，如您在 viewBox.

中指定的那样

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>

SVG 内联到 HTML - 调整宽度

SVG inline to HTML - resize to width

svg

resize

inline

width