带有 svg 和 tspan 的 ul 列表

Question

我正在尝试在 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>

有没有办法做到这一点？

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