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

标签 html css svg

你好,

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

相关文章:

javascript - Jest 无法加载 svg 文件

html - 为什么这些输入框会掉下来?

javascript - 使用 jquery 将新元素设置到列表中

html - 如何将响应式图像调整大小添加到 Sprite 表

html - 在表格单元格内对齐 DIV

javascript - 在另一个带有 class 的 SVG 元素之前插入 SVG 元素

php - 动态添加自定义输入字段并将其保存到数据库

html - CSS 网格中的意外间隙

javascript - 我希望我的标题和导航栏位于相同的 border-bottom

svg - 如何使用 d3.js/SVG 绘制单像素线