@@ -44,24 +44,41 @@ extension LayerTree {
4444 }
4545
4646 func makeLayer( ) -> Layer {
47- let l = makeLayer ( from: svg, inheriting: State ( ) )
48- l. transform = Builder . makeTransform ( for: svg. viewBox,
49- width: svg. width,
50- height: svg. height)
47+ makeLayer ( svg: svg, inheriting: State ( ) )
48+ }
49+
50+ func makeLayer( svg: DOM . SVG , inheriting previousState: State ) -> Layer {
51+ let l = makeLayer ( from: svg, inheriting: previousState)
52+ l. transform = Builder . makeTransform (
53+ x: svg. x,
54+ y: svg. y,
55+ viewBox: svg. viewBox,
56+ width: svg. width,
57+ height: svg. height
58+ )
5159 return l
5260 }
5361
54- static func makeTransform( for viewBox: DOM . SVG . ViewBox ? , width: DOM . Length , height: DOM . Length ) -> [ LayerTree . Transform ] {
55- guard let viewBox = viewBox else {
56- return [ ]
57- }
62+ static func makeTransform(
63+ x: DOM . Coordinate ? ,
64+ y: DOM . Coordinate ? ,
65+ viewBox: DOM . SVG . ViewBox ? ,
66+ width: DOM . Length ,
67+ height: DOM . Length
68+ ) -> [ LayerTree . Transform ] {
69+ let position = LayerTree . Transform. translate ( tx: x ?? 0 , ty: y ?? 0 )
70+ let viewBox = viewBox ?? DOM . SVG. ViewBox ( x: 0 , y: 0 , width: . init( width) , height: . init( height) )
5871
5972 let sx = LayerTree . Float ( width) / viewBox. width
6073 let sy = LayerTree . Float ( height) / viewBox. height
6174 let scale = LayerTree . Transform. scale ( sx: sx, sy: sy)
6275 let translate = LayerTree . Transform. translate ( tx: - viewBox. x, ty: - viewBox. y)
6376
64- var transform = [ LayerTree . Transform] ( )
77+ var transform : [ LayerTree . Transform ] = [ ]
78+
79+ if position != . translate( tx: 0 , ty: 0 ) {
80+ transform. append ( position)
81+ }
6582
6683 if scale != . scale( sx: 1 , sy: 1 ) {
6784 transform. append ( scale)
@@ -91,14 +108,26 @@ extension LayerTree {
91108 return l
92109 }
93110
111+ func makeChildLayer( from element: DOM . GraphicsElement , inheriting previousState: State ) -> Layer {
112+ if let svg = element as? DOM . SVG {
113+ let layer = makeLayer ( svg: svg, inheriting: previousState)
114+ let viewBox = svg. viewBox ?? DOM . SVG. ViewBox ( x: 0 , y: 0 , width: . init( svg. width) , height: . init( svg. height) )
115+ let bounds = LayerTree . Rect ( x: viewBox. x, y: viewBox. y, width: viewBox. width, height: viewBox. height)
116+ layer. clip = [ ClipShape ( shape: . rect( within: bounds, radii: . zero) , transform: . identity) ]
117+ return layer
118+ } else {
119+ return makeLayer ( from: element, inheriting: previousState)
120+ }
121+ }
122+
94123 func makeAllContents( from element: DOM . GraphicsElement , with state: State ) -> [ Layer . Contents ] {
95124 var all = [ Layer . Contents] ( )
96125 if let contents = makeContents ( from: element, with: state) {
97126 all. append ( contents)
98127 }
99128 else if let container = element as? ContainerElement {
100129 container. childElements. forEach {
101- let contents = Layer . Contents. layer ( makeLayer ( from: $0, inheriting: state) )
130+ let contents = Layer . Contents. layer ( makeChildLayer ( from: $0, inheriting: state) )
102131 all. append ( contents)
103132 }
104133 }
0 commit comments