我有以下商品列表及其价格，以 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
最佳答案
您正在使用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>关于SVG 文本 - 一个文本左对齐，同一行中的其他文本必须右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44573384/