javascript - 缩放 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:space="preserve"

在svg

中