大佬教程收集整理的这篇文章主要介绍了SVG 内嵌到 HTML - 调整到宽度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果我在 HTML 中嵌入一个 svg 图像，它会随着浏览器宽度的变化（缩小和扩展）而调整大小，并且图像保持在页面顶部。
如果我内联同一个 svg，我就会遇到问题。当我缩小浏览器的宽度时，图像也会随之缩小，但图像会沿页面向下移动。
你可以在this fiddle
中看到我的意思由于图像需要与一些嵌入的 svgs 保持在相同的相对位置，向下移动页面是一个问题。
<!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>
大概是我误解了布局。有什么想法吗？
阅读 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>
以上是大佬教程为你收集整理的SVG 内嵌到 HTML - 调整到宽度全部内容，希望文章能够帮你解决SVG 内嵌到 HTML - 调整到宽度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。