在Razor中循环生成SVG文本元素遇属性错误的问题咨询

问题原因 #

Razor的HTML解析器在代码块（如@for循环）执行后切换回HTML模式时，无法正确识别SVG元素上下文，误将SVG的<text>标签当成无属性的普通文本元素（HTML标准中不存在独立的<text>标签），因此抛出"text elements can't contain attributes"错误。

正确修复方法 #

方法1：使用Razor显式元素语法 #

在循环体内的<text>标签前添加@前缀，强制Razor将其识别为SVG元素而非普通文本：

<svg>
    @for (var i=0;i<10;i++)
    {
        @<text x="1">hello world</text>
    }
</svg>

方法2：显式指定SVG命名空间 #

在<svg>标签上添加标准SVG命名空间，帮助Razor解析器明确上下文：

<svg xmlns="http://www.w3.org/2000/svg">
    @for (var i=0;i<10;i++)
    {
        <text x="1">hello world</text>
    }
</svg>

方法3：使用WriteLiteral直接输出HTML #

通过Razor的WriteLiteral方法直接渲染SVG元素，避免解析器上下文混淆：

<svg>
    @for (var i=0;i<10;i++)
    {
        @{ WriteLiteral("<text x='1'>hello world</text>"); }
    }
</svg>

以上三种方法中，方法1和方法2更简洁优雅，推荐优先使用。

内容的提问来源于stack exchange，提问作者Darren Oakey