Html 在容器中对齐旋转的SVG文本
我想得到一个垂直调整大小的元素，显示一些对齐的SVG文本元素，一个在顶部，一个在底部。元素还具有旋转文本，这可能会使我尝试的解决方案复杂化 上述画笔的预期行为是，文本为“Left”的元素始终对齐到容器底部（如果您倾斜头部阅读文本，“Left”侧），同样，文本为“Right”的元素始终对齐到容器顶部 实际的行为是，元素与容器中心的偏移量保持不变 由于我使用transform:translate样式，所以在默认元素大小下是这样的，但这不是获得容器任何高度的通用解决方案的正确方法。我的问题是我不知道什么是正确的方法。我见过类似的问题，但提供的解决方案在我的具体案例中似乎不起作用，例如文本锚定、对齐内容、使用百分比（%）css单元引用容器等等 特别是在使用百分比时，我不知道它指的是什么。我相信我通过设置“position:absolute”将元素设置为引用其容器的大小，但具体引用的是什么？x偏移的容器宽度？y偏移的高度是多少？文本的旋转是否会使数学变得混乱（例如，在该计算中翻转x轴和y轴） 即使我正确地使用了百分比，这也不是我理想中想要的行为。文本元素应该根据容器的顶部和底部使用恒定的填充边距来对齐，而不是百分比填充边距（因为它们在很大的容器高度上会从边缘视觉缩放） 守则：Html 在容器中对齐旋转的SVG文本,html,css,svg,Html,Css,Svg,我想得到一个垂直调整大小的元素，显示一些对齐的SVG文本元素，一个在顶部，一个在底部。元素还具有旋转文本，这可能会使我尝试的解决方案复杂化 上述画笔的预期行为是，文本为“Left”的元素始终对齐到容器底部（如果您倾斜头部阅读文本，“Left”侧），同样，文本为“Right”的元素始终对齐到容器顶部 实际的行为是，元素与容器中心的偏移量保持不变 由于我使用transform:translate样式，所以在默认元素大小下是这样的，但这不是获得容器任何高度的通用解决方案的正确方法。我的问题是我不知道
<!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>
div{
边框：2倍实心；
填充：0px；
宽度：32px；
高度：80px；
调整大小：垂直；
溢出：隐藏；
位置：绝对位置；
}
赖特
左边
flexbox