你好,
我正在尝试将 .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%,但到目前为止还不起作用。
提前致谢
改变
width="800px" height="400px"
Run Code Online (Sandbox Code Playgroud)
在你的 SVG 中
width="100%" height="100%"
Run Code Online (Sandbox Code Playgroud)
请参阅此处JSFiddle。test1.svg是您的文件,test2.svg是经过上述修改的文件。