How to Convert Screen Coordinates to Document Space in a Scaled Svg

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

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>

How to convert svg element coordinates to screen coordinates?

I was playing around with this snippet below when I wanted to do the same (learn which screen coordinates correspond to the SVG coordinates). I think in short this is what you need:

Learn current transformation matrix of the SVG element (which coordinates you are interested in), roughly: matrix = element.getCTM();
Then get screen position by doing, roughly: position = point.matrixTransform(matrix), where "point" is a SVGPoint.

See the snippet below. I was playing with this by changing browser window size and was altering svg coordinates to match those of the div element

// main SVG:var rootSVG = document.getElementById("rootSVG");// SVG element (group with rectangle inside):var rect = document.getElementById("rect");// SVGPoint that we create to use transformation methods:var point = rootSVG.createSVGPoint();// declare vars we will use below:var matrix, position;// this method is called by rootSVG after load:function init() {  // first we learn current transform matrix (CTM) of the element' whose screen (not SVG) coordinates we want to learn:  matrix = rect.getCTM();  // then we "load" SVG coordinates in question into SVGPoint here:  point.x = 100;  // replace this with the x co-ordinate of the path segment  point.y = 300;  // replace this with the y co-ordinate of the path segment  // now position var will contain screen coordinates:  position = point.matrixTransform(matrix);  console.log(position)  // to validate that the coordinates are correct - take these x,y screen coordinates and apply to CSS #htmlRect to change left, top pixel position. You will see that the HTML div element will get placed into the top left corner of the current svg element position.}

html, body { margin: 0; padding: 0; border: 0; overflow:hidden; background-color: #fff; }svg {      position: fixed;    top:0%;    left:0%;    width:100%;    height:100%;    background:#fff;   }#htmlRect {  width: 10px;  height: 10px;  background: green;  position: fixed;  left: 44px;  top: 132px;}

<body>  <svg id="rootSVG" width="100%" height="100%" viewbox="0 0 480 800" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init()">
    <g id="rect">      <rect id="rectangle" x="100" y="300" width="400" height="150"/>    </g>
  </svg>  <div id="htmlRect"></div></body>

How to Convert Screen Coordinates to Document Space in a Scaled Svg

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

How to convert svg element coordinates to screen coordinates?

Related Topics

Leave a reply