Почему не отображается svg картинка с градиентом?

Question

[Анатолий]

Почему не отображается #check и как исправить?


Если сразу вставляю svg, то все окей. Но вопрос почему это не работает в примере?

Вот так работает:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
	<path fill="url(#paint_linear)" d="M.9 10.2c1.6 1.4 4.9 5.5 5.6 8.9.1.5 1.1.6 1.4-.1 3.3-7.7 5.1-12.2 9.8-16.8C19.4.5 18.8 0 17.2.8c-3.7 2-7.5 7-10 11.7-2.7-2.4-3.5-2.5-5-3.1-1.6-.6-1.5.5-1.3.8z"/>
	<defs>
		<linearGradient id="paint_linear" x1="20" y1="20" x2="0" y2="0" gradientUnits="userSpaceOnUse">
			<stop stop-color="#256eaa"/>
			<stop offset="1" stop-color="#39a2f9"/>
		</linearGradient>
	</defs>
</svg>

Answer 1

[Максим]

Comments

[Анатолий]

Вы удалили из svg параметр display="none", но сейчас появился отступ сверху.
Как от него избавиться?
В примере ниже, перед синей полосой, есть отступ, я не понимаю как от него избавиться. Если добавляю параметр display="none", отступа нет, но нет и картинки.

[Максим]

Анатолий,

ыsvg - inline-block надо его сделать block а выравнивать уже на flex
так ?

[Анатолий]

Ага, супер!

PS. Можно было не добавлять пример, еще и зачем-то c флексами.
Лечится просто display="block" в теге svg.

[Максим]

Анатолий, тогда текст падает под свг

[Анатолий]

Максим Ленский, не совсем Вас понимаю.

[Максим]

Анатолий, а ну да . я о другому сделал - вопрос решён ?

[Анатолий]

Максим Ленский, да да, спасибо еще раз.