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'）。任何想法如何解决它？我无法指定固定的填充顶部，因为事先不知道文本的长度。

Answer 1

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

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

Answer 2

您只需将 x 和 y 属性添加到文本元素即可更改位置。例如，你可以这样：

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

一切都应该有效

使用tex-anchor包装文本：结束

2 个答案: