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

Question

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

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

 var tableVC:FriendsTableViewController = FriendsTableViewController(className: "Friend")
    tableVC.title = "FriendFamz"

    UINavigationBar.appearance().tintColor = UIColor(red: 0.05, green: 0.47, blue: 0.91, alpha: 1.0)
    UINavigationBar.appearance().barTintColor = UIColor(red: 0.05, green: 0.47, blue: 0.91, alpha: 1.0)
    UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]
    UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent


    var navigationVC:UINavigationController = UINavigationController(rootViewController: tableVC)

    let frame = UIScreen.mainScreen().bounds
    window = UIWindow(frame: frame)

    window!.rootViewController = navigationVC
    window!.makeKeyAndVisible()

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

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

有没有办法以某种方式浮动＆＃39; 4个元素彼此相邻。到目前为止，我所看到的所有内容似乎都表明这些元素中的每一个都需要一个明确的X和Y坐标，在文本呈现之前我实际上并不知道。

我知道有可用的javascript选项（＆＃39; getBBox（）＆＃39;等），但是想知道我是否可以使用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>

Answer 2

您可以使用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>