縮放svg背景圖像以適合容器

Question

我有一個簡單的具有一定高度和寬度的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容器。 我想念什么？

Answer 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：空間= “保存”

在svg