html - 宽度为 100% 的 svg 三 Angular 形

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

更新:将 svg 保存为文件并像这样使用它

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

如果你想要一个纯 CSS 解决方案，请给出 pseudo element或 linear-gradient一试