1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
SVG.extend(SVG.Element, SVG.FX, {
// Add transformations
transform: function(o, relative) {
// get target in case of the fx module, otherwise reference this
var target = this.target || this
, matrix
// act as a getter
if (typeof o !== 'object') {
// get current matrix
matrix = new SVG.Matrix(target).extract()
// add parametric rotation
if (typeof this.param === 'object') {
matrix.rotation = this.param.rotation
matrix.cx = this.param.cx
matrix.cy = this.param.cy
}
return typeof o === 'string' ? matrix[o] : matrix
}
// get current matrix
matrix = this instanceof SVG.FX && this.attrs.transform ?
this.attrs.transform :
new SVG.Matrix(target)
// ensure relative flag
relative = !!relative || !!o.relative
// act on matrix
if (o.a != null) {
matrix = relative ?
// relative
matrix.multiply(new SVG.Matrix(o)) :
// absolute
new SVG.Matrix(o)
// act on rotation
} else if (o.rotation != null) {
// ensure centre point
ensureCentre(o, target)
// relativize rotation value
if (relative) {
o.rotation += this.param && this.param.rotation != null ?
this.param.rotation :
matrix.extract().rotation
}
// store parametric values
this.param = o
// apply transformation
if (this instanceof SVG.Element) {
matrix = relative ?
// relative
matrix.rotate(o.rotation, o.cx, o.cy) :
// absolute
matrix.rotate(o.rotation - matrix.extract().rotation, o.cx, o.cy)
}
// act on scale
} else if (o.scale != null || o.scaleX != null || o.scaleY != null) {
// ensure centre point
ensureCentre(o, target)
// ensure scale values on both axes
o.scaleX = o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1
o.scaleY = o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1
if (!relative) {
// absolute; multiply inversed values
var e = matrix.extract()
o.scaleX = o.scaleX * 1 / e.scaleX
o.scaleY = o.scaleY * 1 / e.scaleY
}
matrix = matrix.scale(o.scaleX, o.scaleY, o.cx, o.cy)
// act on skew
} else if (o.skewX != null || o.skewY != null) {
// ensure centre point
ensureCentre(o, target)
// ensure skew values on both axes
o.skewX = o.skewX != null ? o.skewX : 0
o.skewY = o.skewY != null ? o.skewY : 0
if (!relative) {
// absolute; reset skew values
var e = matrix.extract()
matrix = matrix.multiply(new SVG.Matrix().skew(e.skewX, e.skewY, o.cx, o.cy).inverse())
}
matrix = matrix.skew(o.skewX, o.skewY, o.cx, o.cy)
// act on flip
} else if (o.flip) {
matrix = matrix.flip(
o.flip
, o.offset == null ? target.bbox()['c' + o.flip] : o.offset
)
// act on translate
} else if (o.x != null || o.y != null) {
if (relative) {
// relative
matrix = matrix.translate(o.x, o.y)
} else {
// absolute
if (o.x != null) matrix.e = o.x
if (o.y != null) matrix.f = o.y
}
}
return this.attr(this instanceof SVG.Pattern ? 'patternTransform' : this instanceof SVG.Gradient ? 'gradientTransform' : 'transform', matrix)
}
})
SVG.extend(SVG.Element, {
// Reset all transformations
untransform: function() {
return this.attr('transform', null)
},
// merge the whole transformation chain into one matrix
matrixify: function() {
var matrix = (this.attr('transform') || '')
// split transformations
.split(/\)\s*/).slice(0,-1).map(function(str){
// generate key => value pairs
var kv = str.trim().split('(')
return [kv[0], kv[1].split(SVG.regex.matrixElements).map(function(str){ return parseFloat(str) })]
})
// calculate every transformation into one matrix
.reduce(function(matrix, transform){
if(transform[0] == 'matrix') return matrix.multiply(arrayToMatrix(transform[1]))
return matrix[transform[0]].apply(matrix, transform[1])
}, new SVG.Matrix())
// apply calculated matrix to element
this.attr('transform', matrix)
return matrix
},
// add an element to another parent without changing the visual representation on the screen
toParent: function(parent) {
if(this == parent) return this
var ctm = this.screenCTM()
var temp = parent.rect(1,1)
var pCtm = temp.screenCTM().inverse()
temp.remove()
this.addTo(parent).untransform().transform(pCtm.multiply(ctm))
return this
},
// same as above with parent equals root-svg
toDoc: function() {
return this.toParent(this.doc())
}
})
|
