Как я могу сделать сложные svg элементы с текстом, иконками и т.д?
Мне нужно сделать такой svg элемент. При этом сделать его адаптивными, отзывчивым, т.е при добавлении текста нижняя часть этого элемента должна расширяться под текст, ну и соответственно при изменении размеров родителя. Как бы вы поступили в данном случае?
<svg viewBox="0 0 374 154" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 12C0 5.37259 5.37258 0 12 0H53.1723C56.2701 0 59.2479 1.198 61.4827 3.34335L79.5173 20.6566C81.7521 22.802 84.7299 24 87.8277 24H362C368.627 24 374 29.3726 374 36V142C374 148.627 368.627 154 362 154H12C5.37257 154 0 148.627 0 142V12Z" fill="url(#paint0_linear_122_115)" fill-opacity="0.8" /> <path d="M1 12C1 5.92487 5.92487 1 12 1H53.1723C56.012 1 58.7416 2.09817 60.7901 4.06474L78.8248 21.378C81.2458 23.7022 84.4717 25 87.8277 25H362C368.075 25 373 29.9249 373 36V142C373 148.075 368.075 153 362 153H12C5.92486 153 1 148.075 1 142V12Z" stroke="#11E5B3" stroke-width="2" /> <defs> <linearGradient id="paint0_linear_122_115" x1="146.125" y1="146.395" x2="164.853" y2="-15.6949" gradientUnits="userSpaceOnUse"> <stop stop-color="#008969" /> <stop offset="1" stop-color="#0C1E30" stop-opacity="0" /> </linearGradient> </defs> </svg> |
<svg viewBox="0 0 374 154" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 12C0 5.37259 5.37258 0 12 0H53.1723C56.2701 0 59.2479 1.198 61.4827 3.34335L79.5173 20.6566C81.7521 22.802 84.7299 24 87.8277 24H362C368.627 24 374 29.3726 374 36V142C374 148.627 368.627 154 362 154H12C5.37257 154 0 148.627 0 142V12Z" fill="url(#paint0_linear_122_115)" fill-opacity="0.8" /> <path d="M1 12C1 5.92487 5.92487 1 12 1H53.1723C56.012 1 58.7416 2.09817 60.7901 4.06474L78.8248 21.378C81.2458 23.7022 84.4717 25 87.8277 25H362C368.075 25 373 29.9249 373 36V142C373 148.075 368.075 153 362 153H12C5.92486 153 1 148.075 1 142V12Z" stroke="#11E5B3" stroke-width="2" /> <defs> <linearGradient id="paint0_linear_122_115" x1="146.125" y1="146.395" x2="164.853" y2="-15.6949" gradientUnits="userSpaceOnUse"> <stop stop-color="#008969" /> <stop offset="1" stop-color="#0C1E30" stop-opacity="0" /> </linearGradient> </defs> </svg>
Дополнительно:
Evgenii, пробовал, но проблема в том что здесь градиент + бордер
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания сложных SVG элементов с текстом, иконками и другими деталями, вам необходимо использовать SVG-элементы и их атрибуты. Вот пример создания сложного SVG элемента с текстом и иконками на нем:
Sample Text
В этом примере мы создаем SVG элемент шириной и высотой 100 единиц, рисуем прямоугольник с заданными координатами и цветом фона, круг с заданными координатами и радиусом, текст с указанным шрифтом, размером и выравниванием, а также путь, который формирует треугольник.
Вы также можете использовать другие SVG элементы, такие как , , и другие, чтобы создать более сложные изображения. Не забывайте о стилях CSS, которые можно применить к SVG элементам, чтобы изменить их внешний вид.
Надеюсь, этот пример поможет вам создать сложные SVG элементы с текстом, иконками и другими деталями на вашем веб-сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.