具有svg和tspan的ul列表

Question

我试图在文本/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>

有办法这样做吗？

Answer 1

在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>元素。