svg 实践之屏幕坐标与svg元素坐标转换

SVG坐标转换实践

最新推荐文章于 2022-07-21 20:35:08 发布

原创最新推荐文章于 2022-07-21 20:35:08 发布 · 5.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#svg #javascript

svg 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用SVG坐标转换实现屏幕坐标到SVG坐标的转换。通过JavaScript API如getScreenCTM()和matrixTransform()等，可以方便地进行坐标系之间的转换。文章提供了具体的代码示例，包括如何监听点击事件并获取点击位置的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>