SVG-фон в firefox

#css #firefox #svg #pseudo-element #microsoft-edge

#css #firefox #svg #псевдоэлемент #microsoft-edge

Вопрос:

Работаю на веб-сайте моего друга, и я не могу понять, как правильно отобразить SVG в Firefox. В Edge он также исчезает, когда я изменяю размер браузера.

 http://lene.isreborn.com/

CSS — (я должен использовать important, потому что это WordPress):

 header::after {
    content:"";
    display: block;
    background: url(/svg-filer/header-background.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left:-1%;
    width: 102% !important;
    height: 90px !important;
    position: absolute;
    z-index: -1;

    -ms-transition: top ease .5s;
    -moz-transition: top ease .5s;
    -webkit-transition: top ease .5s;
    transition: top ease .5s;
}

header.sticky-active::after { 
    top: -20px;
}

SVG-файл:

   <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">    
    <polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>
    </svg>

1. Что вы подразумеваете под «правильным отображением SVG»? Включение скриншота и подробного описания желаемого результата поможет визуализировать вашу проблему.

2. Я понял это, мой ответ ниже. — Спасибо 🙂

3. «(Я должен использовать important, потому что это WordPress)» — ты хочешь сказать, что не знаешь лучше? О специфике, например?

Ответ №1:

Я понял это прямо сейчас: размер фона не работает с ‘contain’, но со 100% 100%, см. Фоновые правила Mozilla

Ссылка на сайт разработчика: Смотрите здесь

 header::after {
    content:"";
    display: block;
    background: url(/svg-filer/header-background.svg);
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    top: 0;
    left:-1%;
    width: 102% !important;
    height: 90px !important;
    position: absolute;
    z-index: -1;

    -ms-transition: top ease .5s;
    -moz-transition: top ease .5s;
    -webkit-transition: top ease .5s;
    transition: top ease .5s;
}

header.sticky-active::after { 
    top: -20px;
}

Ответ №2:

Изображение на самом деле белое, верно? Если вы измените цвет заливки на #000, вы увидите изображение:

 <polygon id="XMLID_3_" fill="#000" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>

https://jsfiddle.net/fbwsh1pf/