SVG文本 - 一個文本左對齊，並在同一行中其他文本必須右對齊

Question

我已經顯示在SVG格式的下列項目列表和優惠的價格。

瓶........... $ 5.00
瓶的說明

臺式機配件........... $ 25.00
的桌面附件說明

誰能幫我在svgList的右側佈局價如圖所示image下面也顯示。

瓶................................. $ 5.00
瓶的說明

桌面配件...........的桌面配件

的SVG代碼爲$ 25.00
說明如下：

<svg id=「svgList」 width="816" height="400" class="myBGImage"> 
     <g id="main"> 

      <g id="subGroup01" class="group" transform="translate(20,100)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
       <text alignment-baseline="baseline" text-anchor="start" data-type="itemtitle" id="itemtitle_h0f0" class="roboto_global fontSize_20g" stroke-width="2" color="#000000"> 
       <tspan class="item" text-anchor="start" x="0" y="0">Bottles</tspan> 
       <tspan class="dots" text-anchor="start">...............</tspan> 
       <tspan class="price" text-anchor="start">$5.00</tspan> 
       <tspan class="item-desc" text-anchor="start" x="0" y="20">Description </tspan> 
       </text> 
      </g> 
      <g id="subGroup02" class="group" transform="translate(20,150)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
       <text alignment-baseline="baseline" text-anchor="start" data-type="itemtitle" id="itemtitle_h0f1" class="roboto_global fontSize_20g" stroke-width="2" color="#000000"> 
       <tspan class="item" text-anchor="start" x="0" y="0">Desktop accessories</tspan> 
       <tspan class="dots" text-anchor="start">...............</tspan> 
       <tspan class="price" text-anchor="start">$25.00</tspan> 
       <tspan class="item-desc" text-anchor="start" x="0" y="20">Description </tspan> 
       </text> 
      </g> 
     </g> 
</svg> 

鏈接fiddle

Answer 1

您正在使用text-anchor="start"，你有沒有嘗試text-anchor="end"？

這與定位問題的交易。唯一有點棘手的是如何做可變寬度點，而不必確切地計算出每種情況下需要使用多少個點。

我在我的解決方案所採用的方法（見下方例子）是使用虛線。

<svg id="svgList" width="816" height="400" class="myBGImage"> 
 
    <g transform="translate(20,100)"> 
 
    <line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/> 
 
    <text class="item" text-anchor="start" x="0" y="0">Bottles</text> 
 
    \t <text class="price" text-anchor="end" x="250">$5.00</text> 
 
    </g> 
 
</svg>

然後隱藏文本後面的點，我們添加原文後面的文本的額外副本。然後，我們將該文本的額外副本作爲粗白筆劃來隱藏虛線的相關部分。它具有文字周圍的白色「光環」效果，可以消除文字背後的虛線部分。

在這個小片段，我所做的卒中/光環藍色，表示發生了什麼。

<svg id="svgList" width="816" height="400" class="myBGImage"> 
 
    <g transform="translate(20,100)"> 
 
    <line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/> 
 
    <use xlink:href="#row1" stroke="blue" stroke-width="6"/> 
 
    <g id="row1" fill="white"> 
 
     <text class="item" text-anchor="start" x="0" y="0">Bottles</text> 
 
     <text class="price" text-anchor="end" x="250">$5.00</text> 
 
    </g> 
 
    <text class="item-desc" text-anchor="start" x="0" y="20">Description </text> 
 
    </g> 
 
</svg>

最終結果：

<svg id="svgList" width="816" height="400" class="myBGImage"> 
 
    <g id="main"> 
 

 
    <g id="subGroup01" class="group" transform="translate(20,100)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
 
     <line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/> 
 
     <use xlink:href="#row1" stroke="white" stroke-width="4"/> 
 
     <g id="row1"> 
 
     <text class="item" text-anchor="start" x="0" y="0">Bottles</text> 
 
     <text class="price" text-anchor="end" x="250">$5.00</text> 
 
     </g> 
 
     <text class="item-desc" text-anchor="start" x="0" y="20">Description </text> 
 
    </g> 
 

 
    <g id="subGroup02" class="group" transform="translate(20,150)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
 
     <line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/> 
 
     <use xlink:href="#row2" stroke="white" stroke-width="4"/> 
 
     <g id="row2"> 
 
     <text class="item" text-anchor="start" x="0" y="0">Desktop accessories</text> 
 
     <text class="price" text-anchor="end" x="250">$25.00</text> 
 
     </g> 
 
     <text class="item-desc" text-anchor="start" x="0" y="20">Description </text> 
 
    </g> 
 

 
    </g> 
 
</svg>