在blazor中绘制SVG矩形的问题

如何解决在blazor中绘制SVG矩形的问题

我在偏移 Y 的图像上绘制 svg 矩形时遇到问题。 它总是从 0 开始绘制，而不是从指针位置开始绘制。

我想在图像的某些部分绘制矩形并将坐标仅保存到 OCR 中。

<img width="800" height="700"
     @onpointerdown=PointerDown @onpointerdown:preventDefault
     @onpointerup=PointerUp @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault
     src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"
     style="position:absolute;z-index:1;"
     />
@if (myRect.display)
{
    <svg width="800" height="700" style="position: absolute; z-index: 2;"
     @onpointerdown=PointerDown @onpointerdown:preventDefault
     @onpointerup=PointerDown @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault
     >
         <rect x="@myRect.x" y="@myRect.y" width="@myRect.width" height="@myRect.height" style="fill:transparent;stroke-width:2;stroke:rgb(255,0)" />
     </svg>
 }

@code{
    public class rect
    {
        public bool display { get; set; }
        public double x { get; set; }
        public double y { get; set; }
        public double width { get; set; }
        public double height { get; set; }
    }
    rect myRect = new rect();
    bool mouseDown = false;
    Task PointerDown(PointerEventArgs e)
    {
        mouseDown = true;
        myRect.display = true;
        myRect.x = e.OffsetX;
        myRect.y = e.OffsetY;
        myRect.width = e.Width;
        myRect.height = e.Height;
        StateHasChanged();
        return Task.CompletedTask;
    }

    Task PointerUp(PointerEventArgs e)
    {
        mouseDown = false;
        return Task.CompletedTask;
    }

    Task PointerMove(PointerEventArgs e)
    {
        if (mouseDown)
        {
            myRect.width = e.OffsetX - myRect.x;
            myRect.height = e.OffsetY - myRect.y;
            StateHasChanged();
        }
        return Task.CompletedTask;
    }
}

enter image description here 我的代码有什么问题？