🥇 background-size e SVG

Se o que background-sizevocê deseja usar em um SVG background-imagenão respeita sua proporção, é necessário definir o parâmetro preserveAspectRatiocomo noneno elemento raiz SVG.

<svg >="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" preserveAspectRatio="none">
[...]

Dessa forma, você pode esticar ou reduzir o plano de fundo apenas em uma dimensão por css:

#foo {
    background-size: 100% 3em;
}

Nem o Firefox nem o Internet Explorer respeitam os preserveAspectRatiofundos, mas o WebKit sim. Portanto, o parâmetro é necessário.

Related Posts