enrmarc enrmarc - 2 years ago 71
HTML Question

Wrapping text with tex-anchor: end

So I have this HTML/CSS snippet:


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


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

.amount-container {
overflow: visible;

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

Demo in Jsfiddle

Problem is I want the container svg ('.container') to increase its height to wrap the text ('.amount'). Any ideas how to fix it? I can't assign a fixed padding-top since the the text's length is not known beforehand.

Answer Source

You can't do this automatically. SVG does not have automatic layout like HTML. You have to set its width and height, similar to the <canvas> element.

Your only option would be to use Javascript to detect the size of the text (by calling getBBox() on the text element) and altering the size of the SVG to match.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download