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

时间:2016-04-26 09:32:48

标签: html css svg

所以我有这个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')。任何想法如何解决它?我无法指定固定的填充顶部,因为事先不知道文本的长度。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

一切都应该有效