How do you convert screen coordinates to document space in a scaled SVG?

by

See http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx
It’s my sample code.
For this usage, getScreenCTM method is very useful.

    <svg viewBox="0 0 300 300" onload="
        var c = document.getElementById('c');
        var cx = c.cx.baseVal;
        var cy = c.cy.baseVal;
        var svg = this;
        var point = svg.createSVGPoint();
        svg.onmousemove = function(e){
            point.x = e.clientX;
            point.y = e.clientY;
            var ctm = c.getScreenCTM();
            var inverse = ctm.inverse();
            var p = point.matrixTransform(inverse);
            cx.value = p.x;
            cy.value = p.y;
        };
    ">
        <rect width="100%" height="100%" fill="yellow"/>
        <circle id="c" r="10" fill="blue"/>
    </svg>

More Related Contents:

  1. Fill SVG path element with a background-image
  2. Do I use , , or for SVG files?
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. Drawing an SVG file on a HTML5 canvas
  6. border curved css – circle with curved end
  7. Circular percent progress bar
  8. make an html svg object also a clickable link
  9. Using base tag on a page that contains SVG marker elements fails to render marker
  10. How do I scale a stubborn SVG embedded with the tag?
  11. How to calculate required hue-rotate to generate specific colour?
  12. Convert embedded SVG to PNG in-place
  13. Closing SVG tags, explicit or self closing?
  14. How to change SVG color when it is an encoded CSS background image?
  15. CSS transform origin issue on svg sub-element
  16. Manipulating external svg file style properties with CSS
  17. Drawing multiple edges between two nodes with d3
  18. File Url Cross Domain Issue in Chrome- Unexpected
  19. Css hover sometimes doesn’t work on svg paths
  20. What is the difference between SVG and HTML5 Canvas?
  21. Scale path from center
  22. Create a Reverse Clip-Path – CSS or SVG
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Internet Explorer and clip-path
  25. Resizing SVG in html?
  26. Accessibility: recommended alt-text convention for SVG and MathML?
  27. svg background image position is always centered in internet explorer, despite background-position: left center;
  28. How can I display an image inside SVG circle in html5?
  29. Align svg to center of screen [duplicate]
  30. SVG animation delay on each repetition

Leave a Comment