SVG Hotspot Offset Bug Fix
Budget: $30 – $250 USD
I'm encountering an issue with the SVG hotspot module in my React + TypeScript project. The hotspots (which are primarily polygons) are rendered correctly in the admin interface, but they appear shifted on the user side.
Specifically, the hotspots are rendered left and up relative to where they should be. Therefore, clicks that are aimed at the visually correct spots are not being recognized.
The coordinates for the hotspots are stored as percentages (see the json screenshot)and the rendering logic uses this formula: (coords[n] / 100) * boundingRect.width/height. The SVG overlays the image correctly and click detection employs getBoundingClientRect().
Despite trying various methods (scaling, using natural size, saved image dimensions), the issue persists across all devices and primarily affects users on high resolution screens (1920x1080 and above).
Your task will be to review the user module (SvgHotspotUI.tsx) and fix the misalignment between user clicks and the rendered hotspots. It's crucial that the solution is accurate, responsive and meets expectations.
Ideal skills and experience for this task include:
- Proficiency in React and TypeScript
- Experience with SVG and image hotspot modules
- Strong problem-solving skills to debug and fix the offset issue
- Ability to deliver a solution that works across all devices and screen resolutions.
Specifically, the hotspots are rendered left and up relative to where they should be. Therefore, clicks that are aimed at the visually correct spots are not being recognized.
The coordinates for the hotspots are stored as percentages (see the json screenshot)and the rendering logic uses this formula: (coords[n] / 100) * boundingRect.width/height. The SVG overlays the image correctly and click detection employs getBoundingClientRect().
Despite trying various methods (scaling, using natural size, saved image dimensions), the issue persists across all devices and primarily affects users on high resolution screens (1920x1080 and above).
Your task will be to review the user module (SvgHotspotUI.tsx) and fix the misalignment between user clicks and the rendered hotspots. It's crucial that the solution is accurate, responsive and meets expectations.
Ideal skills and experience for this task include:
- Proficiency in React and TypeScript
- Experience with SVG and image hotspot modules
- Strong problem-solving skills to debug and fix the offset issue
- Ability to deliver a solution that works across all devices and screen resolutions.