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

scale an svg background-image to fit the container

本文关键字：svg 背景 图像 缩放      更新时间：2023-09-26

我有一个简单的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容器。我错过了什么？

找到了一个有效的解决方案。这是我现在的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="保留"

在svg 中

相关文章：