如何在BlazorWASM.NET5中使用内联svg

我的Blazor wasm项目的目标是.NET 5.0运行时。我已经安装了.NET SDK 5.0.200和.NET Runtime 5.0.2

根据这个Github上的Zaneris，在Blazor中可以像这样使用内联svg：

<div>
   <svg> <use xlink:href="images/test.svg#test-logo" /> </svg>
</div>

但是，我只能让它这样工作：

         <div>
            <svg>
                <symbol id="test-logo" viewBox="0 0 255.905 185.056">
                    <g id="Group_284" data-name="Group 284" transform="translate(-65.569 -74.438)">
                        ...
                    </g>
                </symbol>
                <use xlink:href="#test-logo" />
            </svg>
        </div>

我做错了什么？是否需要在head标记中链接svg文件？如果是，我应该将rel设置为什么

---

我希望能够直接从wwwroot中的svg文件中引用符号ID。

我希望向您介绍将.svg代码与任何其他标记一样处理并将其放入Razor组件的想法。通过这种方式，您可以将其内联到您想要的任何位置，并像使用任何其他razor控件一样控制变量：

下面是从illustrator保存的.svg:sample.svg

这是我用它制作的剃须刀页面，SampleSVG.razor。注意变量@Text和@fill。我可以把它放在任何我想要的地方，就像任何其他组件一样：

---

专业提示：由于按钮处理程序是异步的，如果你很快地反复点击它，你可以改变圆圈的颜色超过5倍/秒。迪斯科和可能的扣押警告

好的，我制作了一个示例文件并测试了您在OP中提到的技术，并且能够通过引用单个文件中的两个符号来显示它们。因此，技术似乎不是问题所在

然而，他们是颠倒的，从原来的。我的理解是，你可以只使用一个符号，它会工作，但也许它需要一点修补不知何故，关于设置适当的视口

-编辑-

---

根据，xlink:href现在已经过时。因此，在未来的某个时刻，客户端站点可能会崩溃。我怀疑它会很快出现，因为它看起来是一个非常新的更新，但是需要考虑的事情。如果一个文件中有多个符号，并且只需要选择1进行渲染，您将如何处理这种情况？您会在razor组件上创建类似于enum属性的内容并有条件地显示符号，还是如何实现它？这是一种有上百种方法可以剥猫皮的情况。这取决于你有多少符号，把它们保存在原始文件中对你来说是否重要，以及你是否真的在乎我刚才给你看的那些恶作剧。我理解。我最初要求使用符号ID的内联svg的原因是，我们有大量的svg文件，其中包含大量符号。它们基本上用作图标。我真的不希望每个文件都有一个，需要在任何组件中根据需要拉取它们。JavaScript SPA可以做到这一点，如果我有机会销售Blazor，我需要与Blazor竞争。哦，很有趣。我从Vue.js项目中取出svg文件，并将其放在Blazor中，以同样的方式引用它。所以你认为在Blazor中它的渲染可能会有所不同？我什么都没有。我会试试其他的符号，看看能不能找到什么。是否必须链接头标签中的文件？发现问题。在Vue.js中，使用svg文件时，文件中没有svg标记。它只是满是符号标签。在Blazor中，我必须将符号标记包装在svg标记中，它成功了！我能够像在我的作品中一样使用它。不需要头部链接。谢谢你把我引向正确的方向。我不能投票，因为我没有15个名声。哈哈，没问题。虽然我在做事情的方式上做得很好，但老实说，我不知道符号，也不知道如何在这样的文件中引用符号。现在我肯定需要制作一个大的图标文件。不过，请阅读我对上一个答案的最新评论，因为在不久的将来，这种方法可能会有一个小问题。

<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <text transform="matrix(1 0 0 1 16.2917 24.9155)"><tspan x="0" y="0" font-family="'MyriadPro-Bold'" font-size="12px">Lorem ipsum</tspan></text>
    <circle fill="#EC008C" stroke="#000000" stroke-miterlimit="10" cx="50" cy="58.8" r="15.3" />
</svg>

@page "/svgsample"


Change Text: <input @bind="@Text" /><button @onclick="DoCoolStuff">Go Crazy!</button>
<div style="width:50%; height:auto">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100 100" enable-background="new 0 0 100 100" style="stroke-width: 0px; background-color: #000000;" xml:space="preserve">
        <text transform="matrix(1 0 0 1 16.2917 24.9155)">
            <tspan x="0" y="0" fill="orange" font-family="'MyriadPro-Bold'" font-size="12px">@Text</tspan>
        </text>
        <circle fill="@fill" stroke="#000000" stroke-miterlimit="10" cx="50" cy="58.8" r="15.3" />
    </svg>
</div>


@code {
    string Text = "Start Text";
    string fill = "#EC008C";
    Random random = new Random();

    async Task DoCoolStuff()
    {
        for (int i=0; i< 5; i++)
        {
            fill = String.Format("#{0:X6}", random.Next(0x1000000));
            StateHasChanged();
            await Task.Delay(200);
        }
    }
}