使用 tex-anchor 自动换行文本:结束

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;
}

Jsfiddle 中的演示

问题是我希望容器 svg（'.container'）增加其高度以换行文本（'.amount'）。有什么想法可以解决吗？我无法分配固定的填充顶部，因为文本的长度事先并不知道。

Answer 1

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

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

Answer 2

您可以简单地将属性 x 和 y 添加到文本元素中以更改位置。例如，你可以有这样的东西：

<text class="amount" x=10 y=5>5000</text>

一切都应该正常