我有以下项目列表及其价格以SVG格式显示。
瓶子........... $ 5.00
瓶子描述
桌面配件........... $ 25.00
桌面配件说明
任何人都可以帮我在svgList的右侧布置价格，如下面显示的image所示。
瓶子................................. $ 5.00
瓶子描述
桌面配件........... $ 25.00
桌面配件说明
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);">
<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
答案 0 :(得分：2)
您正在使用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>
<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>