你好,
我正在尝试将 .SVG 插入到 div 容器中。我的问题是我无法使 svg 文件自行拉伸(stretch)到 100% 宽度。我的代码如下:
<html>
<div id="frame1">
<img src="svg/layer1.svg">
</div>
</html>
CSS:
#frame1{
width:100%;
height: 400px;
background-color: transparent;
}
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"/>
我尝试设置 preserveAspectRatio="none"
,并在 svg 参数中将宽度设置为 100%,但到目前为止它还没有工作。
提前致谢
最佳答案
改变
width="800px" height="400px"
在你的 SVG 中
width="100%" height="100%"
请参阅此处 JSFiddle . test1.svg
是您的文件,test2.svg
是经过上述修改的文件。
关于html - 如何制作 .svg 文件以填充其 <div> 容器的 100% 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22236894/