Blazor WebAssembly中C#添加SVG <defs><g>及动态<use>失效问题

问题分析 #

静态<use>标签能正常渲染，但通过RenderFragment动态添加的<use>标签显示坐标为0,0，无法正常显示；动态添加的<rect>标签正常，说明RenderFragment的基本逻辑没问题，问题出在<use>的属性绑定或模型访问权限上。

解决方案 #

1. 修复GraphicModel的属性访问权限

确保GraphicModel中的X和Y是public属性，Blazor需要访问这些属性来绑定值，如果是private/protected，会使用默认值0：

public class GraphicModel
{
    public int X { get; set; }
    public int Y { get; set; }
}

2. 改用标准SVG href属性替代xlink:href

xlink:href已被SVG标准废弃，现代浏览器支持直接使用href属性，避免命名空间相关问题：

RenderFragment<GraphicModel> fragment = model =>@<use href="#combinedGraphic" x="@model.X" y="@model.Y" />;

3. 优化循环渲染逻辑（可选）

将原for循环改为更直观的foreach写法，避免索引引用可能产生的问题：

@foreach (var item in _fragments.Zip(_models, (frag, model) => new { frag, model }))
{
    @item.frag(item.model)
}

修改后的完整代码 #

@using BlazorSvgApp.Client.Model
@rendermode InteractiveWebAssembly

<svg class="station" width="800" height="600" tab-index="0" @onmouseup="OnSvgMouseUp">
    <defs>
        <g id="combinedGraphic">
            <rect width="16" height="16" x="0" y="0" fill="green" />
            <circle cx="28" cy="8" r="8" fill="green" />
        </g>
    </defs>

    @foreach (var item in _fragments.Zip(_models, (frag, model) => new { frag, model }))
    {
        @item.frag(item.model)
    }

    <use href="#combinedGraphic" x="100" y="100"/>
    <use href="#combinedGraphic" x="100" y="200"/>
    <use href="#combinedGraphic" x="100" y="300"/>
</svg>

@code {
    private readonly List<RenderFragment<GraphicModel>> _fragments = new();
    private readonly List<GraphicModel> _models = new();

    private void OnSvgMouseUp(MouseEventArgs e)
    {
        var graphicModel = new GraphicModel { X = (int)e.OffsetX, Y = (int)e.OffsetY };
        var rectModel = new GraphicModel { X = (int)e.OffsetX + 50, Y = (int)e.OffsetY };
        
        RenderFragment<GraphicModel> fragment = model =>@<use href="#combinedGraphic" x="@model.X" y="@model.Y" />;
        RenderFragment<GraphicModel> fragment1 = model =>@<rect width="16" height="16" fill="green" x="@model.X" y="@model.Y" />;

        _models.Add(graphicModel);
        _fragments.Add(fragment);

        _models.Add(rectModel);
        _fragments.Add(fragment1);
    }
}

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