能否从字符串加载含参数的SVG Razor组件并在Blazor页面中使用？

你要的需求完全可行，核心思路是动态编译Razor组件字符串为可实例化的组件类型，再通过DynamicComponent渲染并传递参数。下面是具体实现步骤：

一、动态编译Razor组件字符串 #

首先需要实现一个组件编译服务，将从数据库/文件读取的Razor字符串编译成.NET类型。可以借助Roslyn完成编译，示例代码如下：

using Microsoft.CodeAnalysis;
using Microsoft.CodeAnalysis.CSharp;
using System.Reflection;

public class ComponentCompiler
{
    public async Task<Type> CompileComponentAsync(string razorCode)
    {
        // 将Razor组件转换为C#的BuildRenderTree实现（简化版，复杂场景需用Razor语法解析器）
        var csCode = $@"
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

public class DynamicSvgComponent : ComponentBase
{{
    [Parameter] public double Radius {{ get; set; }}
    [Parameter] public string BackColor {{ get; set; }}

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {{
        builder.OpenElement(0, ""svg"");
        builder.OpenElement(1, ""circle"");
        builder.AddAttribute(2, ""cx"", ""150"");
        builder.AddAttribute(3, ""cy"", ""150"");
        builder.AddAttribute(4, ""r"", Radius.ToString());
        builder.AddAttribute(5, ""stroke"", ""black"");
        builder.AddAttribute(6, ""stroke-width"", ""3"");
        builder.AddAttribute(7, ""fill"", BackColor);
        builder.CloseElement();
        builder.CloseElement();
    }}
}}";

        // 配置编译依赖项
        var references = AppDomain.CurrentDomain.GetAssemblies()
            .Where(a => !a.IsDynamic && !string.IsNullOrEmpty(a.Location))
            .Select(a => MetadataReference.CreateFromFile(a.Location))
            .Concat(new[] {
                MetadataReference.CreateFromFile(typeof(ComponentBase).Assembly.Location),
                MetadataReference.CreateFromFile(typeof(RenderTreeBuilder).Assembly.Location)
            });

        var syntaxTree = CSharpSyntaxTree.ParseText(csCode);
        var compilation = CSharpCompilation.Create("DynamicComponents")
            .WithOptions(new CSharpCompilationOptions(OutputKind.DynamicallyLinkedLibrary))
            .AddReferences(references)
            .AddSyntaxTrees(syntaxTree);

        // 执行编译并加载程序集
        using var ms = new MemoryStream();
        var result = compilation.Emit(ms);

        if (!result.Success)
        {
            var errors = result.Diagnostics.Where(d => d.Severity == DiagnosticSeverity.Error);
            throw new InvalidOperationException($"编译失败：{string.Join(Environment.NewLine, errors.Select(e => e.GetMessage()))}");
        }

        ms.Seek(0, SeekOrigin.Begin);
        var assembly = Assembly.Load(ms.ToArray());
        return assembly.GetType("DynamicSvgComponent")!;
    }
}

说明：上述代码是简化实现，若要处理复杂Razor语法（如循环、条件渲染），需使用官方RazorCompiler解析Razor字符串为标准C#代码。

二、在Blazor页面中使用 #

先将ComponentCompiler注册为服务，再在页面中完成字符串加载、组件编译与渲染：

@inject ComponentCompiler Compiler
@if (ComponentType != null)
{
    <DynamicComponent Type="ComponentType" Parameters="ComponentParams" />
}

@code {
    private Type? ComponentType;
    private Dictionary<string, object> ComponentParams = new()
    {
        { "Radius", 100 },
        { "BackColor", "red" }
    };

    protected override async Task OnInitializedAsync()
    {
        // 模拟从数据库/文件读取Razor组件字符串
        var razorString = @"
<svg>
<circle cx=""150"" cy=""150"" r=""@Radius"" stroke=""black"" stroke-width=""3"" fill=""@BackColor"" />
</svg>
@code {
    [Parameter]
    public double Radius { get; set; }
    [Parameter]
    public string BackColor { get; set; }
}";

        // 编译组件类型
        ComponentType = await Compiler.CompileComponentAsync(razorString);
    }
}

三、简化替代方案（无需编译） #

如果你的SVG参数逻辑简单，也可以直接解析字符串替换参数，用MarkupString渲染，这种方式更轻量但不支持组件生命周期特性：

@((MarkupString)RenderedSvg)

@code {
    private string RenderedSvg;
    private double Radius = 100;
    private string BackColor = "blue";

    protected override void OnInitialized()
    {
        // 模拟读取SVG模板字符串
        var svgTemplate = @"
<svg>
<circle cx=""150"" cy=""150"" r=""{0}"" stroke=""black"" stroke-width=""3"" fill=""{1}"" />
</svg>";

        // 替换参数生成最终SVG
        RenderedSvg = string.Format(svgTemplate, Radius, BackColor);
    }
}

安全提醒 #

动态编译外部来源的代码存在代码注入风险，若SVG字符串来自不可信渠道，必须严格验证输入内容，过滤危险代码片段。

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