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>