SVG内联到HTML -调整到宽度
SVG内联到HTML -调整到宽度
提问于 2021-04-28 10:58:57
如果我在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>大概我误解了布局的某些方面。有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-28 11:39:55
请阅读viewBox属性的功能，以及它如何与width和height交互。
如果您的SVG有一个viewBox，那么它的内容将被缩放以适合SVG中指定的width和height。并且(默认情况下)也将在该“视口矩形”(由width和height指定)中水平和垂直居中。
您的SVG指定高度为"960.42"，高度为"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的正确高度，以便它保持在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67298947
复制相关文章
相似问题
腾讯云开发者
