SVG内联到HTML-按宽度调整大小_Svg_Resize_Width_Inline

SVG内联到HTML-按宽度调整大小

svg

SVG内联到HTML-按宽度调整大小,svg,resize,width,inline,Svg,Resize,Width,Inline,如果我在HTML中嵌入svg图像，它会随着浏览器宽度的改变（收缩和扩展）而调整大小，并且图像保持在页面顶部如果我内联同一个svg，就会出现问题。当我缩小浏览器的宽度时，图像也随之缩小，但图像会在页面上向下移动你可以理解我的意思由于图像需要与某些嵌入的SVG保持相同的相对位置，因此向下移动页面是一个问题 <!DOCTYPE html> <html> <head> <style> svg{ position: absolute; left

如果我在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>


svg{
位置：绝对位置；
左：1px；
顶部：1px；
宽度：100%；
}
#外部SVG{
位置：绝对位置；
左：1px；
顶部：1px；
宽度：100%；
}

大概我对布局有点误解了。有什么想法吗？

请仔细阅读

viewBox

属性的作用，以及它如何与

width

和

height

交互

如果您的SVG有一个

视图框

，则其内容将被缩放以适合SVG中指定的

宽度

和

高度

。并且（默认情况下）也将水平和垂直居中于“视口矩形”（由宽度和高度指定）

SVG指定的

宽度为“960.42”
，高度为“444.28”
。但是，您的宽度超过了“100%”

这意味着当你把页面调到200px时，宽度将变成200px，但高度将保持在444.28。结果是SVG垂直居中的高窄视口。见下文

svg{
宽度：200px；
高度：444.28px；
背景色：亚麻布；
}
删除svg的高度属性。您还可以删除宽度属性和宽度的css轮换，因为默认情况下，没有宽度和高度的svg元素将占据所有可用宽度