Здравствуйте, у меня такая проблема, что при загрузке страницы svg файлы сначала разносятся на всю страницу, а уже потом подгоняются в заданный размер, очень некрасиво смотрится, preloader не действует на svg файлы, как с этим бороться? Заранее благодарю.
P.S. Вот ссылка на видео, для наглядности
https://yadi.sk/i/tSh_5j1L3GGNf2
<object>
<object type="image/svg+xml" data="SvgImg.svg" width="200" height="200">
<img src="SvgImg.png" width="200" height="200" alt="image format png"/>
</object>
<object>
и перейдет к
следующему тегу <img>
и обработает его, как обычный HTML
тег и
выведет картинку. Подробнее здесь. Так надо делать, если вы
хотите использовать интерактивность svg и это лучший способ добавления svg файлов в html.У вас вероятнее всего в самом файле svg отсутствует viewport, поэтому картинка растягивается в каких-то моментах на весь экран. Браузер, если не указан viewport
svg
считает его по умолчанию: width="100%" и height="100%" (это и есть viewport по умолчанию)
Поэтому попробуйте явно задать в шапке svg файла viewport и viewBox с равными величинами.
Например:
<svg id="svg1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
Можно попробовать скрыть все svg
и img
до момента загрузки стилей:
<style>svg, img { display: none; }</style>
<link rel="stylesheet" href="styles.css" />
Ну а в css файле выставляем нужный display
.
Фрилансер или Digital-агентство - Как сделать правильный выбор?
При записи в базу данных строк, содержащих кириллицу, отображаются знаки неверной кодировки:
Как правильно задавать настройки подключения к БД? Параметры настроек правильные, подключался через терминалНа странице выводит только:...