带有 svg 和 tspan 的 ul 列表

Question

I'm trying to use text wrapping in a text/tspan svg element. I'm essentially try to take the code such as this: (ignore the text wrapping part of it for right now)

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

I'm trying to make it like an unordered HTML list:

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

is there a way to do this?

Answer 1

In SVG, you need to manually position each line of text.

You could layout the text using a separate <text> element for each line. For example...

<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>

Or you could layout the text using a single <text> with a separate <tspan> element for each line break. For example...

<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>

Edit: Added <circle> elements for the dots before each list item.