I'm building a floor plan application in React where users can place desk icons by clicking on an SVG floor plan. However, I'm encountering a coordinate system mismatch where desks aren't appearing where users click.
The Issue
- When a user clicks on the floor plan, the desk appears offset from the cursor position. The offset isn't consistent - it seems to increase the further the click is from the center of the SVG.
- For example, when I click at position x:22.5%, y:17.7%, the desk appears at approximately x:30.6%, y:17.7% - showing a horizontal offset of about 8.1% that grows larger the further I click from the center.
Technical Details
- Floor plan is an SVG with viewBox="0 0 2200 1700" and a group transformation transform="translate(0, 1700) scale(0.1, -0.1)"
- I'm calculating click position as percentage of container width/height:
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744955275a4603155.html
评论列表（0条）