在 Blazor 页面中使用 SVGS答案

【问题标题】：Using SVGS in blazor page在 Blazor 页面中使用 SVGS
【发布时间】：2020-03-21 08:16:48
【问题描述】：

我有一个剃须刀组件，我想向它添加一个 SVG。

最好为每个 SVG 创建一个组件，以便我可以轻松地重复使用它，还是只将 SVG 包含到 blazor 页面中会更好？

这些只是我认为可以完成的两种方式，最好的方式是什么？我该如何实施？

没有找到任何资源，所以我无法尝试任何东西。

【问题讨论】：

【解决方案1】：

我试了一下，就我所见，Blazor 组件模型与 Svg 完美配合：

SvgHolder.razor

<svg width="100" height="100">
   @ChildContent
</svg>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

}

SvgSample.razor

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

@code {

}

TestPage.razor

<SvgHolder >
    <SvgSample />
</SvgHolder>

【讨论】：

【解决方案2】：

我发现的一种方法：

在 wwwroot 中添加文件：

然后将其添加到 HTML 页面：

<img src="Images/scissors.svg" />

编辑：如果您不需要使用 css 编辑图像，则此方法有效。阅读@J-Ho cmets。

【讨论】：

它可以工作，但如果你这样做，它会被视为img-element。您不能像 svg-elements 那样设置 img-elements 的样式。 svg-elements 通常用于图标，这些图标具有悬停和所有其他应用效果。例如，您可以使用 css 更改 svg-elements 填充和描边颜色，但如果它是静态 img-element 则不能。
@J-ho，我不知道。谢谢你的解释。