我有一個 div，其中包含一個 300x300 像素的 SVG 圖像和一個 1000x1000 的視圖框。該圖像描述了一個位于紅色矩形之上的藍(lán)色矩形。當(dāng)我移動鼠標(biāo)時，一個圓圈跟隨圖像內(nèi)的鼠標(biāo)位置：一切都很完美，除了當(dāng)我應(yīng)用變換改變透視和旋轉(zhuǎn)時，鼠標(biāo)指針和圓心不再匹配：代碼在這里：$(function() {  $('#image').mousemove(function(event) {    var svg = document.querySelector('svg');    var pt = svg.createSVGPoint();    pt.x = event.clientX;    pt.y = event.clientY;    pt = pt.matrixTransform(svg.getScreenCTM().inverse());    overlay = document.getElementById('overlay');    $('#overlay').html(      "<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"    );    refresh = $("#overlay").html();    $("#overlay").html( refresh )  });});function Transform() {  $('#image').css({    transformOrigin: '500px 500px',    transform: 'perspective(100px) rotateX(5deg)'  });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id='image' tabindex='0' >  <svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000'>    <rect x='0' y='0' width='1000' height='1000' fill='red' />    <rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />    <g id='overlay'></g>  </svg></div><button onclick='Transform()'>Transform</button>我的目標(biāo)是保持紫色圓圈中心和鼠標(biāo)指針之間的匹配，即使對對象應(yīng)用了變換。有沒有辦法做到這一點？