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

Question

我正在生成需要包含一些动态文本元素的 SVG。总体结构如下:

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

或者更清楚一点 - 它是图表顶部的图例:

矩形只是 5px x 5px 的彩色框，但是两个文本元素的宽度都是动态的。然后需要将 4 个元素右对齐。

有没有办法以某种方式使 4 个元素彼此“ float ”。到目前为止我所看到的一切似乎都表明这些元素中的每一个都需要一个明确的 X 和 Y 坐标，直到呈现文本我才真正知道。

我知道有可用的 javascript 选项('getBBox()' 等)，但想知道我是否可以只使用 SVG DOM 本身做些什么？

Answer 1

这是我的 solution没有Javascript。用途 font-awesome与 <tspan>绘制整个文本。

更新:添加了“roboto”字体和dy为了更好的对齐。

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