I am having trouble putting binding svg text elements in razor. If I do this
<svg>
<text x="1">hello world</text>
</svg>
it works fine – but if I do this:
<svg>
@for (var i=0;i<10;i++)
{
<text x="1">hello world</text>
}
</svg>
it gives me an error saying text elements can’t contain attributes – ie clearly it’s forgotten that it’s inside svg.
I can sort of hack around it by going
<svg>
@for (var i=0;i<10;i++)
{
<text><text x="1">hello world</text></text>
}
</svg>
which works but is ugly as – anyone know what the problem is and how to fix it?
6
I’d report this as a bug. I found a couple ways to do this:
<svg>
@for (var i=0;i<10;i++)
{
@((MarkupString)$"""<text x="1" y="{i*20}">hello world</text>""")
}
</svg>
<svg>
@for (var i=0;i<10;i++)
{
<g><text x="1" y="@(i*20)">hello world</text></g>
}
</svg>
I think just putting each text in a new group is unlikely to harm anything in your <svg> markup. But it seems to be an oversight that VS / Blazor doesn’t correctly identify the markup context as svg with just <text>.
2