Repository: electron
Issue: [Bug]: Weird SVG cursor behavior with viewBox under Windows and 150% scaling
Labels: platform/windows,bug :beetle:,status/confirmed,22-x-y,stale,28-x-y

### Preflight Checklist

- [x] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.

### Electron Version

22.3.21 **AND 27.0.4 AND 28.2.3**

`[2023-11-9] Update: this issue probably also exists in Electrion 23 / 24 / 25 / 26`
`[2024-2-20] Update: this issue probably also exists in Electrion 23 / 24 / 25 / 26 / 27`

This issue does not exist in latest Edge (119.0.2151.44)

### What operating system are you using?

Windows

### Operating System Version

Windows 10 22H2 19045.3324

### What arch are you using?

x64

### Last Known Working Electron version

_No response_

### Expected Behavior

I am testing this issue with a 17" 2560x1600 screen.

According to previous tests, this issue is closely related to:
 - The SVG viewBox setting
 - The scaling factor of Windows (150%)

To reproduce the issue, create a new electron 22.3.21 app with this file (index.html):

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'" />
    <title>SVG Test</title>
  </head>
  <body style="margin: 0">
    <div>
      <svg id="graph" style="height: 100vh; width: 100%;">
        <rect x="177" y="60" width="140" height="30" data-col="1" data-row="1"></rect>
      </svg>
    </div>
    <script>
      function Component () {
        this.svg = document.querySelector('svg')
        this.width = this.svg.getBoundingClientRect().width;
        this.height = this.svg.getBoundingClientRect().height;
        this.x = 90
        this.y = 20
        this.updateViewbox = () => {
          this.svg.setAttribute('viewBox', `${this.x} ${this.y} ${this.width} ${this.height}`)
        }
        this.updateViewbox()
        this.setItemCursor = (cursor) => {
          const element = document.querySelector(`rect`)
          if (cursor == null) {
            element.removeAttribute('style')
          }
          else {
            element.setAttribute('style', 'cursor: ' + cursor)
          }
        }
        window.addEventListener('resize', (event) => {
          this.width = this.svg.getBoundingClientRect().width;
          this.height = this.svg.getBoundingClientRect().height;
          this.updateViewbox()
        })
        document.querySelector('rect').addEventListener('mousedown', (event) => {
          if (event.button == 0) {
            this.setItemCursor('grabbing')
          }
        })
        document.querySelector('rect').addEventListener('mouseup', (event) => {
          if (event.button == 0) {
            this.setItemCursor(null)
          }
        })
      }
      const c = new Component()
    </script>
  </body>
</html>
```

and this file as main.js (nothing special):

```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')

app.disableHardwareAcceleration()
var win = null

const createWindow = () => {
  win = new BrowserWindow({
    width: 1600,
    height: 600,
  })
  win.webContents.openDevTools()
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
```

There is a black rectangle in the window. When user left clicks on any part of the rect, the cursor should be changed to "grabbing". No movement is required. When the left button is released, the cursor should be turned back to default.

### Actual Behavior

When user clicks on the lower part of the rect, it works as expected.

 - When user _**mousedown**_ on the upper part of the rect, the cursor does not change
 - When user then _**mouseup**_ on the upper part of the rect, the cursor is changed to "grabbing"
 - When user then _**mousemove**_, the cursor is changed to default


### Testcase Gist URL

_No response_

### Additional Information

_No response_