如何在 Blazor wasm .NET 5 中使用内联 svg

Question

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

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

<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。

Answer 1

我想向您推荐将 .svg 代码视为任何其他标记并将其放入 Razor 组件的想法。这样，您可以将它内嵌在任何您想要的位置，并像使用任何其他剃须刀控件一样控制变量：

这是从 illustrator 保存的 .svg：(sample.svg)

<!-- 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>

这是我用它制作的剃须刀页面，(SampleSVG.razor)。注意变量 @Text 和 @fill。我可以像任何其他组件一样将它放在任何我想要的位置：<SampleSVG />

@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);
        }
    }
}

专业提示：由于按钮处理程序是异步的，如果您一遍又一遍地快速单击它，您可以将圆圈的颜色更改为 5 倍/秒以上。迪斯科！ （以及可能的扣押警告......）

Answer 2

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

但是，它们与原版完全相反。我的理解是你可以只使用一个符号，它会工作，但也许它需要更多的修补，关于正确设置视图框？

--编辑--
根据Mozilla，“xlink:href”现在已经过时了。因此，在未来的某个时候，客户站点可能会崩溃。我怀疑它会很快，因为它似乎是一个非常新的更新，但需要考虑。