Javascript 缩放svg背景图像以适合容器

我有一个具有一定高度和宽度的简单div容器。我需要一个

svg

图像作为div的

：：之后的
的背景图像

以下是我的
：：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
容器。
我遗漏了什么？
找到了一个有效的解决方案。这是我现在的
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>

看起来这里唯一的区别是

xml:space=“preserve”

在
svg
中，您是否尝试过
背景大小：contain
@我尝试了所有可能的背景大小值类型。没有任何变化。不知何故，它仍然保持了方面的比例。您可以向我们展示一个页面或plunker/jsfiddle来解决这个问题吗？演示会很有用。显然还有其他原因。请尝试向
背景大小添加一个实际百分比：
如
100%100%
您可能需要比容器更大，如
105%
您还可以删除svg上的内联样式，它可能超过了您提供的
背景大小：
属性XML:space=“preserve”仅对文本元素有影响，而您没有这些效果。
background-size: auto auto;