https://github.com/laszlokorte/svg-viewbox-trans

This is an experiment to transform coordinates from the viewport space (`clientX`, `clientY`) into the local SVG without using `svg.getScreenCTM()`.
https://github.com/laszlokorte/svg-viewbox-trans

Last synced: about 20 hours ago
JSON representation

This is an experiment to transform coordinates from the viewport space (`clientX`, `clientY`) into the local SVG without using `svg.getScreenCTM()`.

• Host: GitHub
• URL: https://github.com/laszlokorte/svg-viewbox-trans
• Owner: laszlokorte
• Created: 2023-09-25T14:47:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-25T14:50:02.000Z (about 1 year ago)
• Last Synced: 2024-04-09T23:06:26.571Z (7 months ago)
• Language: Svelte
• Size: 71.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Screenshot of the app](preview.png)

[Live Demo](https://static.laszlokorte.de/svg-viewbox-trans/)

# Manual SVG ViewBox calculation

This is an experiment to transform coordinates from the viewport space (`clientX`, `clientY`) into the local SVG without using `svg.getScreenCTM()`. The reason for not using `getScreenCTM()` is to be able to do the calculations without updating the SVG DOM element.

Configure the SVG element and ViewBox size and alignment as you like and then click inside the SVG. The red dot shoult be placed correctly at the click position.