gpt4 book ai didi

html - 如何制作 .svg 文件以填充其
容器的 100% 宽度?

转载 作者:行者123 更新时间:2023-11-28 17:51:29 26 4
gpt4 key购买 nike

你好,

我正在尝试将 .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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com