缩放 svg 背景图像以适应容器答案

【问题标题】：scale an svg background-image to fit the container缩放 svg 背景图像以适应容器
【发布时间】：2015-11-18 13:22:30
【问题描述】：

我有一个具有一定高度和宽度的简单 div 容器。我需要一个 svg 图像作为我的 div 的 ::after 的背景图像。

这些是我::after的风格

    &:after{
        content:'';
        background-image: url('../images/svg/triangle_blue.svg');
        background-repeat: no-repeat;
        background-size: auto auto;
        position:absolute;
        right: 0;
        top: 0;
        transform: translateX(100%);
        display:inline-block;
        width: 50px;
        height: 100%;
    }

这是我的 svg 头部的样子：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 50 100" width="100%" height="100%" preserveAspectRatio="none">

现在我希望 svg 始终按比例缩放以适应 ::after 容器。我错过了什么？

【问题讨论】：

只是一个想法，你试过background-size: contain 吗？ w3schools.com/cssref/css3_pr_background-size.asp
@valepu 我已经尝试了所有可能的背景大小值类型。完全没有变化。不知何故，它仍然保留了纵横比
你能给我们看一个页面或一个 plunker/jsfiddle 来解决这个问题吗？
一个演示会很有用。显然还有其他事情发生。
尝试向background-size: 添加一个实际百分比，例如100% 100%，您可能需要比105% 之类的容器更大，您也可以删除svg 上可能覆盖的内联样式您提供的 background-size: 属性

标签： javascript jquery html css svg

【解决方案1】：

找到一个可行的解决方案。这是我现在的svg 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 50 100" width="100%" height="100%" enable-background="new 0 0 50 100" xml:space="preserve" preserveAspectRatio="none"><g><polygon fill="#009EE0" points="0 100 50 50 0 0 "/></g></svg>

css:

background-size: auto auto;

似乎这里唯一的区别是

xml:space="preserve"

在svg

【讨论】：

xml:space="preserve" 仅对文本元素有影响，而您没有任何影响。