Blazor - 将元素添加到 SVG 对象

Question

我想用 blazor 操作 SVG 对象，是否可以通过 C# 客户端执行此操作，或者我是否需要使用 javascript。例如，根据在 SVG 区域中的点击以编程方式绘制一条线。任何指针将不胜感激。我发现了很多关于添加 SVG 组件的内容，但没有找到关于向现有 svg 组件添加元素的内容

Answer 1

您可以使用 SVG 文件内容作为 Blazor 组件中的标记，然后执行您通常会执行的任何 Blazor-y 操作。

在 svg 标记中放置一个变量，并将其构建为一个字符串。

这里是 highly-simplified 摘录： (MySvgComponent.blazor)

<svg blah blah blah>
    <polyline fill="none" stroke="#0074d9"
        stroke-width="2" points="@PointString" />
</svg>
@code {
    public string @PointString {get;set;}
    public void AddPoint (int X, int Y){
         @PointString += " " + X + "," + Y;
}

您必须添加自己的代码以确定要添加点的位置。您可以创建一个 List 参数以从父对象或其他对象传入，然后在 OnInitialized() 的 foreach 循环中调用 AddPoint。您还可以通过将诸如“0074d9”之类的文字替换为变量“@myColorString”来非常轻松地替换笔触颜色或其他任何颜色。“

处理 mouse-click 位置需要一些花哨的 JS 工作。尝试将 Javascript Interop 与以下内容一起使用：

Blazor - 将元素添加到 SVG 对象

Blazor - Add element to SVG object

svg

blazor-client-side