html - 用 tex-anchor : end 包装文本

Question

所以我有这个 HTML/CSS 片段:

HTML:

<svg class="container">
  <g>
    <svg class="amount-container">
      <text class="amount" >500</text>
     </svg>
  </g>
</svg>

CSS:

.amount {
  writing-mode: tb;
  text-anchor: end;
}

.amount-container {
  overflow: visible;
}

.container {
  background: white;
  margin: 200px;
  overflow: visible;
}

Demo in Jsfiddle

问题是我希望容器 svg ('.container') 增加其高度以包裹文本 ('.amount')。任何想法如何解决它？我无法分配固定的 padding-top，因为事先不知道文本的长度。

Answer 1

您不能自动执行此操作。 SVG 没有像 HTML 那样的自动布局。你必须设置它的宽度和高度，类似于 <canvas>元素。

您唯一的选择是使用 Javascript 检测文本的大小(通过在文本元素上调用 getBBox())并更改 SVG 的大小以匹配。