Случайно (не) появляющиеся маркеры SVG - PullRequest
Новая
       0

Случайно (не) появляющиеся маркеры SVG

0 голосов
/ 05 февраля 2019

Пытаясь добавить несколько хороших SVG-изображений в качестве маркеров для моего сайта, я столкнулся с очень странным поведением и ошибкой в ​​Firefox.Я отладил его на следующий MWE:

Исходный код

У меня есть следующий HTML-документ: 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style-image: url('listImage.svg');
        }
        </style>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </body>
</html>

У меня также есть следующий файл SVG с именем listImage.svg: 

<svg  xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

Проблема

Когда я открываю HTML-документ в Firefox, список отображается так, как и должно быть, с SVG, красиво отображаемым в качестве маркера списка:

The unordered list, with the svg-images nicely in front of the list's items

Но когда я обновляю страницу или перезагружаю страницу, они иногда исчезают:

The same unordered list, but without the svg-images in front of the items

При обновлении страницы изображения, кажущиеся случайными, продолжают появляться и исчезать снова.Вместо этого выполнение жесткого обновления (с помощью Ctrl + F5 ) или удаление кэша и данных автономного веб-сайта не изменяет это.

Определенные браузеры

Эта проблема возникает только в Firefox 

Firefox Quantum 65.0 (64-bits)
Firefox Developer Edition 66.0b4 (64-bits)

В других браузерах у меня не было никаких проблем, изображения всегда появлялись. 

Internet Explorer 11
    Version: 11.523.17134.0
    Updateversions: 11.0.105 (KB4480965)
Edge
    42.17134.1.0
    Microsoft EdgeHTML 17.17134

(Если кто-то может предоставить информацию о Google ChromeПожалуйста, отредактируйте и добавьте его к вопросу. Я использовал какой-то онлайн-инструмент, и результаты этого предполагают, что SVG выглядит нормально в Google Chrome, однако я не думаю, что этот тест является твердым доказательством этого)

Почему это происходит?

Похожие вопросы

Я нашел этот вопрос , который может быть связан, однако этот вопрос отличается, так как у меня есть только эта проблема в Firefox иОтветы на этот вопрос не решили мою проблему.

1 Ответ

0 голосов
/ 05 февраля 2019

Я не могу ответить на поведение в FF Dev Ed 66.0b2, но есть обходной путь, чтобы получить желаемый результат, хорошо выглядящий в FF и Chrome (не тестировался с Edge или Safari):

использовать фоновое изображение svgв вашем теге li вместо ul-style-image-image.Установите положение этого фона и добавьте отступ к li 

ul {
  list-style-type: none;
  margin-left: -20px;
}

li {
  background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
  background-repeat: no-repeat;
  background-position: 0px 6px;
  padding-left: 20px;
  background-size: 5px;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

это соответствующая скрипка

edit: , как я написал в своем комментарии,* .gif файлы ведут себя как положено в FF и Chrome, отметьте это fiddle .Поэтому альтернативный ответ будет:

сохраните ваш код, просто преобразуйте svg в gif

ОБНОВЛЕНИЕ: ваше изображение svg не имеет ни ширины, ни высоты, при этомрешает проблему: 

<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

проверка: https://jsfiddle.net/zf1hjrav/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...