用于在 blazor 中制作 SVG 的 BuilderRenderTree

如何解决用于在 blazor 中制作 SVG 的 BuilderRenderTree

我正在为我正在工作的当前项目制作自定义下拉组件，但在使用 builderrendertree 时遇到了一些问题。我的 SVG 组件大部分都显示出来了，但也不完全正确，我收到了控制台错误。我通过 figma 制作了 svg，然后导出了该 SVG 代码。我附上了使用构建器方面时组件外观的屏幕截图。另外，从我通过 figma 导出的那个 SVG 应该如何看。非常感谢任何帮助或信息

组件构建器代码

protected override void buildrenderTree(RenderTreeBuilder builder)
    {
        var seq = 0;
        
        base.buildrenderTree(builder);
      
        
        builder.OpenElement(seq,"svg");
        builder.AddAttribute(seq++,"width","217");
        builder.AddAttribute(seq++,"height","345");
        builder.AddAttribute(seq++,"viewBox","0 0 217 345");
        builder.AddAttribute(seq++,"fill","none");
        builder.AddAttribute(seq++,"xmlns","http://www.w3.org/2000/svg");
        

        builder.OpenElement(seq++,"g");
        builder.AddAttribute(seq++,"100%");

        builder.OpenElement(seq++,"id","Dropdown");
        builder.AddAttribute(seq++,"filter","url(#filter0_d)");
        
        builder.OpenElement(seq++,"path");
        builder.AddAttribute(seq++,"d","M26 39.769C26 36.1779 28.4624 33.2667 31.5 33.2667H185.5C188.538 33.2667 191 36.1779 191 39.769V327.498C191 331.089 188.538 334 185.5 334H31.5C28.4624 334 26 331.089 26 327.498V39.769Z");
        builder.AddAttribute(seq++,"#FCFCFC");
        builder.CloseElement();
        
        builder.OpenElement(seq++,"M172.247 13.5554C173.807 10.1482 177.943 10.1482 179.503 13.5554L190.441 37.4476C191.929 40.697 189.939 44.6458 186.814 44.6458H164.936C161.811 44.6458 159.821 40.697 161.309 37.4476L172.247 13.5554Z");
        builder.AddAttribute(seq++,"M191.5 39.769C191.5 37.9162 190.874 36.1996 189.838 34.9297L179.957 13.3472C179.104 11.4824 177.512 10.5 175.875 10.5C174.238 10.5 172.646 11.4824 171.793 13.3472L162.902 32.7667H31.5C28.1111 32.7667 25.5 35.9834 25.5 39.769V327.498C25.5 331.283 28.1111 334.5 31.5 334.5H185.5C188.889 334.5 191.5 331.283 191.5 327.498V39.769Z");
        builder.AddAttribute(seq++,"stroke","#575757");
        builder.CloseElement();
        
        
        builder.CloseElement();
        builder.CloseElement();
       
        
        builder.OpenElement(seq++,"defs");
        
        builder.OpenElement(seq++,"filter");
        builder.AddAttribute(seq++,"filter0_d");
        builder.AddAttribute(seq++,"x","21");
        builder.AddAttribute(seq++,"y","10");
        builder.AddAttribute(seq++,"175");
        builder.AddAttribute(seq++,"333");
        builder.AddAttribute(seq++,"filterUnits","userSpaceOnUse");
        builder.AddAttribute(seq++,"color-interpolation-filters","sRGB");
        
        builder.OpenElement(seq++,"feFlood");
        builder.AddAttribute(seq++,"flood-opacity","0");
        builder.AddAttribute(seq++,"result","BackgroundImageFix");
        builder.CloseElement();
        
        builder.OpenElement(seq++,"feColorMatrix");
        builder.AddAttribute(seq++,"in","SourceAlpha");
        builder.AddAttribute(seq++,"type","matrix");
        builder.AddAttribute(seq++,"values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0");
        builder.CloseElement();
        
        builder.AddAttribute(seq++,"feOffset");
        builder.AddAttribute(seq++,"dy","4");
        builder.CloseElement();
        
        builder.OpenElement(seq++,"feGaussianBlur");
        builder.AddAttribute(seq++,"stdDeviation","2");
        builder.CloseElement();
        
        builder.OpenElement(seq++,"feBlend");
        builder.AddAttribute(seq++,"mode","normal");
        builder.AddAttribute(seq++,"in2","BackgroundImageFix");
        builder.AddAttribute(seq++,"effect1_dropShadow");
        builder.CloseElement();
        
        builder.OpenElement(seq++,"SourceGraphic");
        builder.AddAttribute(seq++,"effect1_dropShadow");
        builder.AddAttribute(seq++,"shape");
        builder.CloseElement();
        
        builder.CloseElement();
        builder.CloseElement();
      
    }

我的控制台中显示的错误

    crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
              Unhandled exception rendering component: Attribute frames should only be present as leading children of element frames.

      Error: Attribute frames should only be present as leading children of element frames.
          at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34689)
          at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
          at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
          at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)
          at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
          at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
          at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)
          at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
          at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
          at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)

Microsoft.JSInterop.JSException: Attribute frames should only be present as leading children of element frames. Error: Attribute frames should only be present as leading children of element frames.

    at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34689)
    at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
    at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
    at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)
    at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
    at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
    at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)
    at e.insertFrameRange (https://localhost:5001/_framework/blazor.webassembly.js:1:38690)
    at e.insertElement (https://localhost:5001/_framework/blazor.webassembly.js:1:35655)
    at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:34569)    at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier,Int32 arg0,RenderBatch arg1,Object arg2,Int64 targetInstanceId)    at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch arg1)

atMicrosoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdatedisplayAsync(RenderBatch& batch)

at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

SVG 代码

    <svg width="217" height="345" viewBox="0 0 217 345" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="Frame 1">
        <g id="Dropdown" filter="url(#filter0_d)">
            <path d="M26 39.769C26 36.1779 28.4624 33.2667 31.5 33.2667H185.5C188.538 33.2667 191 36.1779 191 39.769V327.498C191 331.089 188.538 334 185.5 334H31.5C28.4624 334 26 331.089 26 327.498V39.769Z" fill="#FCFCFC"/>
            <path d="M172.247 13.5554C173.807 10.1482 177.943 10.1482 179.503 13.5554L190.441 37.4476C191.929 40.697 189.939 44.6458 186.814 44.6458H164.936C161.811 44.6458 159.821 40.697 161.309 37.4476L172.247 13.5554Z" fill="#FCFCFC"/>
            <path d="M191.5 39.769C191.5 37.9162 190.874 36.1996 189.838 34.9297L179.957 13.3472C179.104 11.4824 177.512 10.5 175.875 10.5C174.238 10.5 172.646 11.4824 171.793 13.3472L162.902 32.7667H31.5C28.1111 32.7667 25.5 35.9834 25.5 39.769V327.498C25.5 331.283 28.1111 334.5 31.5 334.5H185.5C188.889 334.5 191.5 331.283 191.5 327.498V39.769Z" stroke="#575757"/>
        </g>
    </g>
    <defs>
        <filter id="filter0_d" x="21" y="10" width="175" height="333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
            <feOffset dy="4"/>
            <feGaussianBlur stdDeviation="2"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
        </filter>
    </defs>
</svg>

构建器组件的输出：

我试图在构建器组件中制作的 SVG 应该是什么样子：