Question

我想使用100％宽度的svg图像，该图像具有从左上角到右下角的填充背景。我已经尝试了几种方法使它总是100％宽（背景大小等），但它不起作用。

如果我打开svg源代码，有几个“修复”宽度。也许这就是问题所在。但我不知道如何解决它。

如果我可以把这个swg作为div的背景，那就太好了。（使用css）

这是我的svg代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="1280px" height="70px" viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve">
<polygon points="1280,70 0,70 0,0 "/>
</svg>

有人知道如何解决这个问题吗？我还考虑了另一种方法，使用旋转的div容器。但我认为svg是最好的方式。

在这里你可以看到一个例子：

jsfiddle.net/maszzfom

Answer 1

删除宽度和高度

<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"
     viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve" preserveAspectRatio="none">
<polygon points="1280,70 0,70 0,0 "/>
</svg>

CSS

svg{width:100%}

resource on responsive svg

Demo

upate：将svg保存为文件并像这样使用

.element {
    background-image: url(image.svg);
    /* other styles */
}

如果您想要一个纯粹的CSS溶质，请尝试pseudo element或linear-gradient

Answer 2

如果三角形本身没有内容（只是装饰），则应在CSS中定义。

按照三角形（100％宽度和静态高度70px）的示例，您可以实现：

＆＃13;

.triangle {

  position: relative;

}

.triangle:before {

  background-repeat: no-repeat;

  background-size: 100% 100%;

  content: '';

  display: block;

  position: absolute;

  width: 100%;

  left: 0;

  bottom: -70px;

  height: 70px;

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,100 0,100' style='fill:%23000000;' /%3E%3C/svg%3E");

}

＆＃13;

<div class="triangle"></div>

＆＃13;

三角坐标可以反转：points =＆＃39; 0,0 0,100 100,100＆＃39;
您可以更改三角形颜色：＆＃34;填充：％23000000;＆＃34;
CSS适用于：before和：after，具体取决于您的需求！
小提琴：http://jsfiddle.net/b8czxyzg/

svg三角形，宽度为100％

2 个答案: