Blazor语言 - 将元素添加到 SVG 对象

Question

我想用blazyor操作SVG对象，可以通过C#客户端执行此操作，还是需要使用javascript。 例如，根据 SVG 区域中的单击以编程方式绘制一条线。 任何指示将不胜感激。我在添加 SVG 组件时发现了很多，但在向已经存在的 svg 组件中添加元素时却一无所知

Answer 1

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

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

以下是高度简化的摘录： (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"来非常轻松地替换笔触颜色或其他任何颜色。

处理鼠标单击位置将需要一些花哨的JS工作。 尝试将 Javascript Interop 与以下内容一起使用： 如何获取相对于持有 onclick 监听器的 SVG 元素的点击坐标？