svg 實踐之屏幕坐標與svg元素坐標轉換

近期在做svg相關項目，很好用的東西要記下來：

1、基礎知識就是根據 矩陣進行坐標轉換，如下：

： 屏幕坐標 = 矩陣* svg對象坐標

2、javascript有個方法用於獲取 svg對象 的轉換矩陣CTM ：svgObj.getScreenCTM(); 該矩陣將svg坐標轉換為屏幕坐標

3、所以以上公式：已知屏幕坐標，已知矩陣，求svg對象坐標

4、如下：
5、javascript方法：矩陣.inverse() =矩陣的逆矩陣
6、代碼如下：
api：
/*屏幕坐標轉為svg坐標*/

coordinateTransform(screenPoint, someSvgObject) {
var CTM = someSvgObject.getScreenCTM();
return screenPoint.matrixTransform(CTM.inverse());
}
reportMouseCoordinates(svgElement, pageX, pageY, svgChild) {
var point = svgElement.createSVGPoint();
point.x =pageX; 
point.y = pageY;
point = coordinateTransform(point, svgChild); 
return point;
}

調用：

bindEvent(){
this.grid.addEventListener('click',(event) => {
let pageX = event.pageX;
let pageY = event.pageY;
let point = utils.reportMouseCoordinates(this.svg, pageX, pageY, this.grid);
}
}

dom：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<defs>
<pattern id="gridDot" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<path d="M0,0H1V1" stroke="#ccc" stroke-width="0.1" fill="none"></path>
</pattern>
<pattern id="gridBlock" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<path d="M0,0H1V1" stroke="#ccc" stroke-width="0.1" fill="none"></path>
</pattern>
</defs>


<rect id="grid_10X10" x="0" y="0" width="100%" height="100%" fill="url(#gridDot)">
</rect>
<!-- <rect id="grid_20X20" x="0" y="0" width="100%" height="100%" fill="url(#gridBlock)">
</rect> -->
<!-- <text x="100" y="100" dx="20 20 20 20" dy="20" style="font-size:20px; font-family: 'Arial'">ABCDE</text>
<path d="M100,0V200M0,100H200" stroke="red"></path> -->
</svg>