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

【问题标题】：Align objects with dynamic width in SVG在 SVG 中将对象与动态宽度对齐
【发布时间】：2015-07-21 03:26:09
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

另一种方法是在一行中渲染整个文本，在两个文本之间留出足够的（不可见的）间距以容纳 5px 宽的框并右对齐文本，从右边缘结束 5px
阿尔文的想法不错。我不确定如何知道放置矩形的 X 坐标？
text-anchor="end" 的 x 位置从右边缘开始 5px。集装箱的宽度是多少？整页？
容器的宽度为 100%，并且有多个 rect/text 对。这是图表的图例 - 为了清楚起见，我在上面添加了一张图片。
你可以很容易地在没有 SVG 的 HTML 中做到这一点。

标签： javascript svg

【解决方案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>

【讨论】：

感谢 Alvin - 巧妙地使用字体。不幸的是，它仍然有一个外部依赖，所以我认为 Paul 说 SVG 中没有内置布局功能是正确的。不过，这个解决方案会很有帮助。
要移除外部依赖，font-awesome 有一个 SVG 等效项，其中包含您添加的 &#xf0c8;（fa-square）字形 manually。 <svg> 编码保持不变。 TL;DR: SVG 布局需要 javascript 才能正确对齐。

【解决方案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>

【讨论】：

这很有帮助 - 但是在这种情况下，我有文本和图形元素散布在同一行上，它们都需要右对齐。问题在于文本的宽度是动态的......
我一定是看错了你的问题。我以为你的例子说 text-rect-rect-rect 。无论如何，答案是否定的。仅使用普通 SVG 是无法做到这一点的。 SVG 没有像 HTML 这样的自动布局。