Blazor / SVG 实时更新答案

【问题标题】：Blazor / SVG Real Time UpdatesBlazor / SVG 实时更新
【发布时间】：2021-09-01 15:09:57
【问题描述】：

我正处于使用 Blazor 开发实时 Web 应用程序的早期阶段。目的是在网页上显示与某些设备状态有关的实时状态更新。这是一台机器的HMI。可以将其想象为具有实时数据更新的仪表板。

机器的图形模型将使用 SVG 完成并托管在应用程序中。我正在尝试设计应用程序，以便可以在 InkScape 之类的工具中完成创建和标记图形模型并进行相应标记，从而提供模型属性的点点滴滴，然后可以由 blazor 应用程序根据具体情况进行操作机器的状态。例如，根据机器部件的运行状态更改 SVG 对象的颜色或可见性。服务器会知道机器各个部分的状态，当它们发生变化时，我想将更改推送到应用程序并实时更新图形。

我正在努力寻找最佳设计方法，以便将图形的创作与呈现的实际 HTML 分开。

所以，我的问题是，是否可以使用 Blazor 根据数据更改更新 svg DOM 的已知部分。例如，如果每个元素都有一个已知的“id”字段，我如何找到该元素，然后更新 svg 的“填充”或“可见性”或其他属性？

【问题讨论】：

这完全取决于您要更新的内容。可以使用 id 和/或类和属性/变量通过 CSS 处理它，但只有您知道您需要的全部控制范围。
您可以使用带有 svg 标记的 Blazor 变量，其方式与在 HTML 标记中使用它的方式完全相同。确保您使用的是带有内联 svg 的 .razor 组件，而不是 svg 或类似的东西。 Brian 的回答举了一个很好的例子。

标签： svg blazor blazor-server-side

【解决方案1】：

Blazor 与 SVG 配合得很好。它可以像任何其他 html 一样呈现它。

SomeSvgComponent.razor

<svg height="100" width="100">
    <CircleSvg Radius="@radius" />
</svg>

<input type="range" 
       class="form-control-range" 
       step=".1" min="20" max="60" 
       @bind-value="@radius" 
       @bind-value:event="oninput"  />

@code {
    double radius = 40;
}

CircleSvg.razor

<circle cx="50" cy="50" r="@Radius" stroke="black" stroke-width="3" fill="red" />
@code {
    [Parameter]
    public double Radius { get; set; }
}

BlazorFiddle

【讨论】：