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