Я хотел бы получить вертикально изменяемый размер элемента, показывающий некоторые текстовые элементы SVG, выровненные, один сверху и один снизу. Элемент также имеет повернутый текст, что может усложнять мои попытки решения.
https://codepen.io/elsewhere_/pen/abOBapZ
Предполагаемое поведение описанного выше пера заключается в том, что элемент с текстом «Слева» всегда выравнивается до нижней части контейнера («левой» стороны, если вы наклоните голову, чтобы прочитать текст), и аналогичным образом элемент с текстом «Справа» будет всегда выравниваться до верхней части контейнера.
Фактическое поведение состоит в том, что элементы остаются с некоторым постоянным смещением от центра контейнера.
Это верно для размера элемента по умолчанию, потому что я играю с transform: translate styleling до тех пор сработало, но это не правильный способ go получить обобщенное решение для любой высоты контейнера. Моя проблема в том, что я не знаю, каков здесь правильный подход. Я видел подобные вопросы к этому, но предоставленные решения не работали в моем конкретном случае c, например, text-anchor, justify-content, используя процентные (%) css единицы для ссылки на контейнер, и так на.
Специально для использования процентов, я запутался в отношении того, на что он ссылается. Я полагаю, что настроил элемент для ссылки на размер его контейнера, установив «position: absolute», но на что конкретно ссылаются? Ширина контейнера для x смещений? Его высота для y смещений? Поворот текста мешает здесь математику (например, переверните оси x и y для этого вычисления)?
И даже если я правильно использовал процент, это не то поведение, которое я хочу в идеале. Текстовые элементы должны выравниваться с постоянным отступом от верхней и нижней части контейнера, а не с отступом в процентах (поскольку они визуально масштабируются от края при очень большой высоте контейнера).
Код:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 0px;
width: 32px;
height: 80px;
resize: vertical;
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 32 80" height="100%" width="100%" style="position:absolute; pointer-events:none;">
<text style="transform-origin: center;
transform:rotate(-90deg) translate(18px, 40px);" fill="red" >Right</text>
<text text-anchor="left" style="transform-origin: center;
transform:rotate(-90deg) translate(-20px, 40px);" fill="red" >Left</text>
</svg>
</div>
</body>
</html>