svg 三角形，宽度为 100%答案

【问题标题】：svg triangle with 100% widthsvg 三角形，宽度为 100%
【发布时间】：2016-02-11 18:08:04
【问题描述】：

我想使用 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

【问题讨论】：

标签： html css svg

【解决方案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

【讨论】：

用 CSS 也可以做到这一点吗？我想使用 div 并将背景放置在“background-image: url()”中谢谢您的快速响应。
是的，但您必须将其保存为.svgfile 请阅读此内容tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css
带有“background-image: url()”的解决方案不起作用，因为 .element 需要定义的高度。在我的情况下，这是 70px，然后它没有按预期工作。图像只有 1280 像素宽。然后重复。
我可以看看你的css吗？你用的是background-size:cover还是background-size:contain？
为确保三角形始终为宽度的 100%，您可能还必须将属性 preserveAspectRatio="none" 添加到您的 <svg>。否则如果容器高度低于 70，三角形会缩小变窄。

【解决方案2】：

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

按照您的示例使用三角形（100% 宽度和静态高度 70px），您可以将其实现为：

.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");

}

&lt;div class="triangle"&gt;&lt;/div&gt;

三角坐标可以反转：points='0,0 0,100 100,100'
您可以更改三角形颜色：“fill:%23000000;”
CSS 可与 :before 和 :after 配合使用，具体取决于您的需要！
小提琴：http://jsfiddle.net/b8czxyzg/

【讨论】：