Question

嗨，

我试图将.SVG插入到div容器中。我的问题是我不能让svg文件自己伸展到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"/>

我尝试使用set preserveAspectRatio="none"，并在svg参数中将宽度设置为100％，但到目前为止它还没有工作。

提前致谢

Answer 1

更改

width="800px" height="400px"

在您的SVG中

width="100%" height="100%"

见JSFiddle。 test1.svg是您的文件，test2.svg是包含上述修改的文件。

Answer 2

您可能还需要更改纵横比：

改变

width="800px" height="400px"

在您的 SVG 中

width="100%" height="100%" preserveAspectRatio="none"

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

如何制作.svg文件以填充其<div>容器的100％宽度？</div>

2 个答案: