@maksiminakk

Как я могу сделать сложные svg элементы с текстом, иконками и т.д?

Мне нужно сделать такой svg элемент. При этом сделать его адаптивными, отзывчивым, т.е при добавлении текста нижняя часть этого элемента должна расширяться под текст, ну и соответственно при изменении размеров родителя. Как бы вы поступили в данном случае?
64661c9b689c3898711973.png
<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>
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы