如何制作 .svg 文件来填充其 <div> 容器的 100% 宽度?

Oma*_*lez 2 html css svg

你好,

我正在尝试将 .SVG 插入 div 容器中。我的问题是我无法使 svg 文件将自身拉伸到 100% 宽度。我的代码如下:

<html> 
   <div id="frame1">
     <img src="svg/layer1.svg">
   </div>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

#frame1{
      width:100%;
      height: 400px;
      background-color: transparent;
}
Run Code Online (Sandbox Code Playgroud)

SVG 文件:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px"width="800px" height="400px" viewBox="0 0 800 400" 
enable-background="new 0 0 800 400" xml:space="preserve">
<g><defs><rect id="SVGID_1_" x="0" y="-0.371" width="800" height="400.742"/>
Run Code Online (Sandbox Code Playgroud)

我尝试使用 set preserveAspectRatio="none",并将 svg 参数内的宽度设置为 100%,但到目前为止还不起作用。

提前致谢

hel*_*cha 5

改变

width="800px" height="400px"
Run Code Online (Sandbox Code Playgroud)

在你的 SVG 中

width="100%" height="100%"
Run Code Online (Sandbox Code Playgroud)

请参阅此处JSFiddletest1.svg是您的文件,test2.svg是经过上述修改的文件。