Webdriverio can't do drag and drop for SVG tspan element - webdriver-io

Question

I tried to do drag and drop for SVG tspan elements, but it's not working, also tried to use browser.performActions, still not working, any idea? Browser is google chrome: version 103.0.5060.53, webdriverio version is 7.20.5. Below is the code:
let x1, x2, y1, y2, from, target;
const el = await $$('tspan');
for (const e of el) {
if((await e.getText())==="input_field"){
from = e;
x1=parseInt(await from.getLocation('x'),10);
y1=parseInt(await from.getLocation('y'),10);
console.log("input",x1,y1);
}
else if((await e.getText())==="output_field"){
target = e;
x2=parseInt(await target.getLocation('x'),10);
y2=parseInt(await target.getLocation('y'),10);
console.log("output",x2,y2);
}
}
const xoffset =x2-x1;
const yoffset=y2-y1;
console.log("offset",xoffset,yoffset);
await from.dragAndDrop(target, 500);
await browser.performActions([
{
"type": "pointer",
"id": "mouse1",
"parameters": {"pointerType": "mouse"},
"actions": [
{"type": "pointerMove", "duration": 0, "x": x1, "y": y1},
{"type": "pointerDown", "button": 0},
{"type": "pause", "duration": 1000},
{"type": "pointerMove", "duration": 1000, "origin": "pointer", "x": xoffset, "y": yoffset},
{"type": "pointerUp", "button": 0}
]
},
]).then(() => browser.releaseActions());