svg实践之屏幕坐标与svg元素坐标转换
近期在做svg相关项⽬，很好⽤的东西要记下来：
1、基础知识就是根据矩阵进⾏坐标转换，如下：
：屏幕坐标 = 矩阵* svg对象坐标
2、javascript有个⽅法⽤于获取 svg对象的转换矩阵CTM ：ScreenCTM(); 该矩阵将svg坐标转换为屏幕坐标
3、所以以上公式：已知屏幕坐标，已知矩阵，求svg对象坐标
4、如下：
5、javascript⽅法：矩阵.inverse() =矩阵的逆矩阵
6、代码如下：
api：
/*屏幕坐标转为svg坐标*/
coordinateTransform(screenPoint, someSvgObject) {
var CTM = ScreenCTM();
return screenPoint.matrixTransform(CTM.inverse());
}
reportMouseCoordinates(svgElement, pageX, pageY, svgChild) {
var point = ateSVGPoint();
point.x =pageX;
point.y = pageY;
point = coordinateTransform(point, svgChild);
return point;
}
调⽤：
bindEvent(){
let pageX = event.pageX;
let pageY = event.pageY;
let point = portMouseCoordinates(this.svg, pageX, pageY, id);
}
}
dom：
<svg xmlns="/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>svg怎么转为pdf
</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" >ABCDE</text>
<path d="M100,0V200M0,100H200" stroke="red"></path> -->
</svg>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。