带有svg和tspan的ul列表

ul list with svg and tspan

本文关键字：ul 列表 tspan svg 带有      更新时间：2023-12-14

我正在尝试在text/tspan svg元素中使用文本换行。我基本上是在尝试这样的代码：（现在忽略它的文本包装部分）

<svg>
    <g>
        <text>
             Date: date here
            <tspan>this is a list item</tspan>
            <tspan>this is another list item</tspan>
        </text>
    </g>
</svg>

我试图让它像一个无序的HTML列表：

Date: date here
<ul>
    <li>this is a list item</li>
    <li>this is another list item</li>
</ul>

有办法做到这一点吗？

在SVG中，您需要手动定位每一行文本。

您可以为每一行使用单独的<text>元素来布局文本。例如

<svg>
    <g>
        <text x="0em" y="1em">Date: date here</text>
        <circle cx="1.75em" cy="2.75em" r="2px"/>
        <text x="2.5em" y="3em">this is a list item</text>
        <circle cx="1.75em" cy="3.75em" r="2px"/>
        <text x="2.5em" y="4em">this is another list item</text>
    </g>
</svg>

或者，您可以使用单个<text>对文本进行布局，每个换行符都有一个单独的<tspan>元素。例如

<svg>
    <g>
        <circle cx="1.75em" cy="2.75em" r="2px"/>
        <circle cx="1.75em" cy="3.75em" r="2px"/>
        <text x="0em" y="1em">
            Date: date here
            <tspan x="2.5em" dy="2em">this is a list item</tspan>
            <tspan x="2.5em" dy="1em">this is another list item</tspan>
        </text>
    </g>
</svg>

编辑：为每个列表项之前的点添加了<circle>元素。

相关文章：