@antonio0226

Почему svg картинка не принимает размеры родительского блока?

Привет всем.
Есть вот такая html структура
<div class="col-md-3">
					<div class="red__block_wrapper">
						<div class="red__block">
							<div class="red__block__logo"></div>
						</div>
					</div>
				</div>

И css стили
.red__block_wrapper{
	background: #ad000b;
}
.red__block{
	height: 250px;
	width: 250px;

}
.red__block__logo{
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21000 29700" fill="#ad000b"><defs><style type="text/css">@font-face { font-family:&quot;Antiqua&quot;;font-variant:normal;font-style:normal;font-weight:normal;src:url(&quot;#FontID0&quot;) format(svg)}.fil0 {fill:#fffff5}.fnt1 {font-weight:normal;font-size:1180.53px;font-family:&#39;Antiqua&#39;}.fnt0 {font-weight:normal;font-size:1697.53px;font-family:&#39;Antiqua&#39;}</style></defs><text x="3718" y="12057" class="fnt0">Текст</text><text x="3662" y="14610" class="fnt1">  Текст</text><text x="3662" y="15925" class="fnt1">Текст</text><rect x="964" y="10083"/><polygon class="fil0" points="3096 13465 3039 13773 3340 14105 3126 15584 3214 16254 2264 13615 "/><polygon class="fil0" points="2027 14957 2184 14668 2373 14969 "/><path class="fil0" d="M3438 10501c-156-48-148-11-263-31-8-1 33 78 25 77-8-1-63-35-72-36-7-1 21 46 12 46-170-7-557 145-635 290-96 179-84 427-84 562 51 19 58 183 40 228 1-36-10-87-31-134-17-40-108-97-100 206 2 75 50 200 58 257 31 237 54 185 114 174-2 146 65 455 65 455 18 113 438 399 629 475 191 76 292 60 292 60l-51-2628z"/></svg>');
	background-repeat: no-repeat;
}

Такая проблема, что блок с картинкой, не принимает размеры родительского блока => картинка не отображается. Хотя до этого указывал blockname в него пихал блок которому инлайном задавал background , как здесь, и картинка корректно отображалась. Заранее спасибо. Если даю высоту картинки, то она растягивает всю страницу т.е сам блок становиться например 250px, но картинка намного меньше.
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы