对齐文本（或其他对象）与容器

的底部我有SVG族元素如此：对齐文本（或其他对象）与容器

<g transform="translate(290 110)"> 
    <rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" /> 
</g>

我想添加与的内侧左下边界对齐一些文本rect。有点像HTML中的left和bottom CSS属性。

我该如何做到这一点？

[编辑]，试图计算出抵消自己的是，我不能在同样的计算混搭PX和EM测量

的一个问题。例如，容器是68x68px，但我想从底部偏移文本1em。此外，从一个tspan到下一个的距离应该基于像素以外的其他东西。

来源

2016-12-28 posfan12

所以，添加文字，正确定位。有什么问题？ – 2016-12-28 03:35:31

我有一些文字包装成多行，但需要粘贴到容器的底部。 – posfan12

对于多行文本，您需要添加具有不同x，y或dx dy值的多个tspan。 –

要对齐多行文本，只需使用<tspan>和dy属性。

<svg width="400" height="400"> 
 
    <g transform="translate(290 110)"> 
 
    <rect x="0" y="0" rx="4" ry="4" width="68" height="68" style="fill:none;stroke:black;stroke-width:1;" /> 
 
    
 
    <text y="68"> 
 
     <tspan>First line</tspan> 
 
     <tspan x="0" dy="-1em">Second line</tspan> 
 
     <tspan x="0" dy="-1em">Third line</tspan> 
 
    </text> 
 
    </g> 
 
</svg>

来源

2016-12-28 08:03:22

对齐文本（或其他对象）与容器

回答

相关问题