Виджеты SVG в хромированном состоянии

Это очень странно. Я использую изображения SVG из-за небольшого размера файла, четкого рендеринга и масштабируемости (объекты оживляют совсем немного). Он отлично работает в FF, т.е. 9, Safari и iPad, но в Chrome некоторые изображения SVG отображаются очень плохо.

SVG in chrome

SVG in safari

Есть идеи, почему это может происходить? Сами файлы SVG очень маленькие.

Вот пример svg

Ответы

Ответ 1

Так или иначе, это законная ошибка хрома. И есть исправление, сделайте svg 'large', svg файлы, которые внутренне сообщают об этом слишком мало, потому что это ошибка.

Ответ 2

После многих исследований я наконец нашел рабочее исправление:
экспортируйте svg дважды необходимые размеры (я поэтому назвал его [email protected])
затем в css добавьте transform: scale(0.5)

Результат в Chrome будет выглядеть так же, как в Firefox.

Ответ 3

Я столкнулся с этой ошибкой с элементом с фоном SVG. Обходной путь состоял в том, чтобы уменьшить непрозрачность на .01, т.е.:

.thing {
    background: url('my-image.svg');
    opacity: 0.99;
}