I want to draw a path, on an SVG element where a user has clicked (so they could do something akin to using a paint brush).
I am loading an svg through the <object> tag, and in the SVG, there is already a path (that is empty). My idea is to set the path attributes with the clicked position.
This kind of works, but if the SVG element is resized in CSS, the clicked positions do not line up with the SVG element.
As I simple test case, I created a page to draw a small circle wherever the use clicked. If the SVG element had no styling on it, (it was essentially at the top left corner of the page) this worked, but if I made the element something like width: 50% in the CSS, the circle position was way, way off.
You can see a basic example, here but it only really works to show you the concept, as it appears JSBIN does not support the <object> element or something.
Really it's the conceptual question of what happens when you resize and SVG with CSS and how do you normalize clicked positions after it has been resized?
