Высота svg = высоте родителя, высота родителя = высоте дочернего блока в котором текст

@Gerd199 · 13.10.2022, 20:32. **Показов** 750. **Ответов** 7

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.str {
    display: flex;
    flex-direction: row-reverse;
}
.dch {
    font-size:20px;
    align-self: center;
}
</style>
 
<div class='str'>
    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z"/><path d="M11.76,21.24a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.41l8.49-8.49A1,1,0,0,1,21,12.46L12.46,21A1,1,0,0,1,11.76,21.24Z"/><path d="M20.24,21.24a1,1,0,0,1-.7-.29l-8.49-8.49a1,1,0,0,1,1.41-1.41L21,19.54A1,1,0,0,1,21,21,1,1,0,0,1,20.24,21.24Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>
     <div class='dch'>Текст</div>
</div>

Вопрос в том, как сделать так, чтобы высота блока svg принимала высоту родителя. А высота родителя была исходя от высоты дочернего блока в котором расположен такст. Возможно?

@PavelShef · 14.10.2022, 10:17

Родитель он на то и родитель, что не может наследовать, свойства дочери, а дочь может и заодно приобретать новые, начнем с того что svg это не блок, а возможность отрисовывать в области svg изображения линиями, подход для svg не прост, надо понимать как строятся изображения векторами, и тут только эксперементировать...

@DrType · 14.10.2022, 10:38

Родитель вроде бы по умолчанию подстраивается по высоте под дочерний блок. Если для родителя где-то явно задана высота, то можно переопределить для него правило, задав height: fit-content. А вот с высотой SVG, действительно, сложнее. У SVG есть свой viewbox, и, например, одновременное задание для неё и ширины, и высоты приведёт к искажениям.

@PavelShef · 14.10.2022, 11:19

DrType, Родитель под дочерний? Как вы себе это представляете?

@DrType · 14.10.2022, 11:41

PavelShef, ну блоку если явно не задавать высоту, то он растягивается под содержимое.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="background: grey">
  <div>
    <!--Тут можно изменить объём текста: -->
    <pre>
 
 
 
 
 
 
 
 
    </pre>
  </div>
</div>

И с flex-контейнерами так же.

@PavelShef · 14.10.2022, 11:43

DrType, а зачем тогда создавать контейнер с неявными свойствами для контейнера с содержимым? это помоему бессмысленно, если можно все расписать под один контейнер, логика построение таких конструкций, иногда вызывает вопросы... а flex- кончено красота, но все же юзать неявные блоки как пустую обертку, такое себе, лишняя нагрузка

@DrType · 14.10.2022, 11:57

PavelShef, тут на самом деле вот в чём дело: у автора контейнер .str имеет display: flex. А в этом случае он подстроится под наибольший по высоте из своих дочерних блоков, а все остальные дочерние уже растянутся на всю высоту родителя. Если только контейнеру не задать явно align-items. Так что применительно к ситуации я был неправ — если SVG-шка выше блока с текстом, то родитель примет как раз её высоту, а это как раз не то, что требуется ТС.

@PavelShef · 14.10.2022, 12:05

DrType, Мудрят молодые), можно в таких случаях либо пользоваться процентами сразу под адаптацию, или же бутстрап, min- max-, кому как удобней, и делать как принято, помоему именно так выглядит говно-код(ой говно-разметка), даже для частных случаев разглядывать такие примеры... Можно за ранее просчитать +- наперед, что бы частных случаев не возникало... Даже ТС с высота родителя=высота дочки, ну априори не должно существовать...), равенство наследования везде - это как перемножение матриц, только в опредленном порядке...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	14.10.2022, 10:17
	Родитель он на то и родитель, что не может наследовать, свойства дочери, а дочь может и заодно приобретать новые, начнем с того что svg это не блок, а возможность отрисовывать в области svg изображения линиями, подход для svg не прост, надо понимать как строятся изображения векторами, и тут только эксперементировать... 1

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	14.10.2022, 10:38
	Родитель вроде бы по умолчанию подстраивается по высоте под дочерний блок. Если для родителя где-то явно задана высота, то можно переопределить для него правило, задав `height: fit-content`. А вот с высотой SVG, действительно, сложнее. У SVG есть свой viewbox, и, например, одновременное задание для неё и ширины, и высоты приведёт к искажениям. 1

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	14.10.2022, 11:19
	DrType, Родитель под дочерний? Как вы себе это представляете? 1

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	14.10.2022, 11:43
	DrType, а зачем тогда создавать контейнер с неявными свойствами для контейнера с содержимым? это помоему бессмысленно, если можно все расписать под один контейнер, логика построение таких конструкций, иногда вызывает вопросы... а flex- кончено красота, но все же юзать неявные блоки как пустую обертку, такое себе, лишняя нагрузка 1

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	14.10.2022, 11:57
	PavelShef, тут на самом деле вот в чём дело: у автора контейнер `.str` имеет `display: flex`. А в этом случае он подстроится под наибольший по высоте из своих дочерних блоков, а все остальные дочерние уже растянутся на всю высоту родителя. Если только контейнеру не задать явно `align-items`. Так что применительно к ситуации я был неправ — если SVG-шка выше блока с текстом, то родитель примет как раз её высоту, а это как раз не то, что требуется ТС. 1

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	14.10.2022, 12:05
	DrType, Мудрят молодые), можно в таких случаях либо пользоваться процентами сразу под адаптацию, или же бутстрап, min- max-, кому как удобней, и делать как принято, помоему именно так выглядит говно-код(ой говно-разметка), даже для частных случаев разглядывать такие примеры... Можно за ранее просчитать +- наперед, что бы частных случаев не возникало... Даже ТС с высота родителя=высота дочки, ну априори не должно существовать...), равенство наследования везде - это как перемножение матриц, только в опредленном порядке... 1