console
// var a = Snap.path('M0, 0L0, 10')
var Svg = Snap(1500, 1500)
var Paper = Svg.paper
document.getElementById('section').appendChild(Svg.node)
// var path = Paper.path("M9875.555555555557,9932.222222222223L9912.548971339827,9931.524233245162L9949.542387124096,9930.826244268099L9986.535802908367,9930.128255291038L9987.30528047379,9967.120253132143L9988.074758039214,10004.112250973249L9988.844235604638,10041.104248814352L9989.613713170062,10078.096246655457").attr({
// stroke: "#000",
// 'stroke-width': 10,
// 'strokeLinecap': 'round',
// // transform: "matrix(1,0,0,1,0,0)"
// fill: 'red'
// })
const r = Paper.rect(400, 200, 50, 100)
matrix = Snap.matrix().translate(30, 30).rotate(30, 425, 250)
const { x, y, x2, y2, cx, cy } = r.getBBox()
// console.log(r.getBBox())
// const m1 = matrix.clone().add(425, 0, 0, 0, -250, x2-x)
const m1 = Snap.matrix(1, 0, 0, 1, 30, 30)
const r1 = r.clone().attr({'fill': 'red'})
r.transform(matrix.toTransformString())
r1.transform(m1.toTransformString())
<html>
<head>
<title>111</title>
</head>
<bod>
<h1>画布区域</h1>
<section id="section">
</section>
</bod>
</html>
#section {
height: 1000px;
width: 1000px;
background: #f2f2f2;
}