时间戳

首页 > 解决方案 > 如何在 Blazor wasm .NET 5 中使用内联 svg

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

问题描述

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

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

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

照片-wwwroot

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

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

标签： svgblazor

解决方案

我想向您推荐将 .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);
        }
    }
}

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

推荐阅读