zoukankan      html  css  js  c++  java
  • svg坐标转换

    本文内容转自

    Why we need Coordinate Translation

    This is the tricky part. Presume you click an SVG and want to create or position an SVG element at that point. The event handler object will give you the DOM .clientX and .clientY pixel coordinates but these must be translated to SVG units.

    It’s tempting to think you can calculate the x and y coordinates of an SVG point by applying a multiplication factor to the pixel location. For example, if a 1000 unit-width SVG is placed in a 500px width container, you can multiply any cursor x coordinate by two to get the SVG location. It rarely works!…

    • There is no guarantee the SVG will fit exactly into your container.
    • If the page or element dimensions change – perhaps in response to the user resizing the browser – the x and y factors must be re-calculated.
    • The SVG could be transformed in either 2D or 3D space.
    • Even if you overcome these hurdles, it never quite works as you expect. There’s often a margin of error.

    DOM to SVG Coordinate Translation

    Fortunately, SVGs provide their own matrix factoring mechanisms to translate coordinates. The first step is to create a point on the SVG using the createSVGPoint() method and pass in our screen x and y coordinates:

    var svg = document.getElementById('mysvg'),
    pt = svg.createSVGPoint();
    
    pt.x = 100;
    pt.y = 200;
    
    

    We can then apply a matrix transformation. That matrix is created from an inverse of the SVG’s (under-documented!) getScreenCTM() method which maps SVG units to screen coordinates:

    var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
    

    svgP now has .x and .y properties which provide the SVG coordinate location.

    SVG to DOM Coordinate Translation

    Element.getBoundingClientRect() is supported in all browsers and returns an DOMrect object with the following properties in pixel dimensions:

    • .x and .left – x-coordinate, relative to the viewport origin, of the left side of the element
    • .right – x-coordinate, relative to the viewport origin, of the right side of the element
    • .y and .top – y-coordinate, relative to the viewport origin, of the top side of the element
    • .bottom – y-coordinate, relative to the viewport origin, of the bottom side of the element
    • .width – width of the element (not supported in IE8 and below but is identical to .right minus .left)
    • .height – height of the element (not supported in IE8 and below but is identical to .bottom minus .top)

    All coordinates are relative to the browser viewport and will therefore change as the page is scrolled. The absolute location on the page can be calculated by adding window.scrollX to .left and window.scrollY to .top.

  • 相关阅读:
    C#异步和多线程以及Thread、ThreadPool、Task区别和使用方法
    C# LINQ查询表达式用法对应Lambda表达式
    C# WPF 通过委托实现多窗口间的传值
    C# WPF 父控件通过使用可视化树找到子控件
    OpenCV打开摄像头闪退问题
    C#调用pyd
    微信支付(JSAPI、小程序)开发流程记录
    在安装pymysql遇到的问题
    个人理解的python的面向对象
    关于python3.4 MD5
  • 原文地址:https://www.cnblogs.com/MnCu8261/p/11830342.html
Copyright © 2011-2022 走看看