我想使用 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 是最好的方式。
这里你可以看到一个例子:
最佳答案
去除宽度和高度
<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%}
更新:将 svg 保存为文件并像这样使用它
.element {
background-image: url(image.svg);
/* other styles */
}
如果你想要一个纯 CSS 解决方案,请给出 pseudo element或 linear-gradient一试
关于html - 宽度为 100% 的 svg 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25850161/