鉴于：
您未转换的 SVG 点
还有你的 SVG 转换矩阵
您可以在数学上将变换应用于这些点。
结果点是转换后的 XY——“标准化”XY。
生成的点将在与转换后的 SVG 点相同的位置绘制到画布上。
生成的点不需要在正确的位置绘制 SVG 转换。
下面是应用变换矩阵来“标准化”一个点的代码：
function simplifyTransform(point,matrix){
simpleX = point.x * matrix[0] + point.y * matrix[2] + matrix[4];
simpleY = point.x * matrix[1] + point.y * matrix[3] + matrix[5];
return({x:simpleX,y:simpleY});
}
这是一个插图：
这是代码和演示：http://jsfiddle.net/m1erickson/ushWr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var x=50;
var y=50;
var h=30;
var w=50;
var matrix=[1.25,.75,.75,1.25,20,20];
ctx.save();
ctx.transform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5],matrix[6]);
ctx.fillStyle="red";
ctx.fillRect(x,y,w,h);
ctx.restore();
// make an array of the 4 corners of the rectangle
var points=[];
points.push({x:x,y:y});
points.push({x:x+w,y:y});
points.push({x:x+w,y:y+h});
points.push({x:x,y:y+h});
// get the transformed rectangle's corners in untransformed space
var rect=simplifyPoly(points,matrix);
// stroke the untransformed rectangle
ctx.save();
ctx.strokeStyle="green";
ctx.lineWidth=2;
ctx.moveTo(rect[0].x,rect[0].y);
for(var i=1;i<rect.length;i++){
ctx.lineTo(rect[i].x,rect[i].y);
}
ctx.closePath();
ctx.stroke();
ctx.restore();
function simplifyTransform(point,matrix){
simpleX = point.x * matrix[0] + point.y * matrix[2] + matrix[4];
simpleY = point.x * matrix[1] + point.y * matrix[3] + matrix[5];
return({x:simpleX,y:simpleY});
}
function simplifyPoly(points,matrix){
var simplePoints=[];
for(var i=0;i<points.length;i++){
simplePoints.push(simplifyTransform(points[i],matrix));
}
return(simplePoints);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>The red fill is drawn using untransformed points plus a transform<br>The green stroke is drawn using the "simplified" points--no transform involved.</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>