對齊文本（或其他對象）與容器

的底部我有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

對齊文本（或其他對象）與容器

回答

相關問題