玩轉SVG之線性轉換

3月在部門組織了一場關於SVG的培訓，把沒有分享到博客的資料放到博文上吧,因爲PPT寫過了，就截圖放上了，比較懶，懶得再打字了，嘿嘿~

1. 線性變換屬性

2. dom轉SVG的座標點

核心代碼

document.addEventListener('click', (e) => {
        let x = e.clientX;
        let y = e.clientY;
        const name = "http://www.w3.org/2000/svg"

        // 核心API
        let rect = document.createElementNS(name, 'rect')
        let svg = document.getElementById('svg')

        // svg內置API 將屏幕座標轉換爲當前svg座標 svg.createSVGMatrix();
        let rootCTM = svg.getScreenCTM();
        let pt = svg.createSVGPoint();
        pt.x = x;
        pt.y = y;
        let { x: xx, y: yy } = pt.matrixTransform(rootCTM.inverse())

        rect.setAttribute('x', xx - 5)
        rect.setAttribute('y', yy - 5)
        rect.setAttribute('width', 10)
        rect.setAttribute('height', 10)
        rect.setAttribute('fill', 'red')
        svg.appendChild(rect)
    })