在SVG中将对象与动态宽度对齐

Question

I am generating an SVG that needs to include some dynamic text elements. The general structure is as follows:

--------------------------------------------
|               <rect> <text> <rect> <text>|
|                                          |
|                                          |
|                                          |
--------------------------------------------

or to be a bit clearer - it's the legend at the top of a chart:

The rectangles are just 5px by 5px colored boxes, however both text elements are dynamic in width. The 4 elements then need to be aligned to the right.

Is there a way to somehow 'float' the 4 elements next to each other. Everything I have looked at so far seems to indicate that each of these elements needs a explicit X and Y coordinate which I don't actually know until the text is rendered.

I'm aware that there are javascript options available ('getBBox()' etc) but wondered if there was anything I could do just using the SVG DOM itself?

Answer 1

Here's my solution that doesn't have Javascript. Uses font-awesome with <tspan> to draw the entire text.

update: Added "roboto" font and dy for better alignment.

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<svg viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" width="400px" height="400px" >
  <text text-anchor="end" x="400" y="20">
    <tspan dy="1" font-size="8pt" font-family="roboto" class="fa fa-fw" fill="skyblue"> &#xf0c8;</tspan> 
    <tspan dy="-2" font-size="8pt" font-family="roboto" >Gross Profit % &nbsp;&nbsp;</tspan>
    <tspan dy="2" font-size="8pt" font-family="roboto" class="fa fa-fw" fill="green"> &#xf0c8;</tspan> 
    <tspan dy="-2" font-size="8pt" font-family="roboto" >Op. Profit % &nbsp;&nbsp;</tspan>
    <tspan dy="2" font-size="8pt" font-family="roboto" class="fa fa-fw" fill="orange"> &#xf0c8;</tspan> 
    <tspan dy="-2" font-size="8pt" font-family="roboto" >Net Profit after tax % </tspan>
  </text>
</svg>

Answer 2

You can right-align text using text-anchor="end" .

 <svg width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="xMaxYMin"> <rect x="462" y="2" width="36" height="36" fill="blue"/> <rect x="422" y="2" width="36" height="36" fill="green"/> <rect x="382" y="2" width="36" height="36" fill="red"/> <text x="378" y="15" font-size="15px" text-anchor="end">Some right justified text</text> <text x="378" y="35" font-size="15px" text-anchor="end">Shorter text</text> </svg>