OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <title>object-position on SVG images</title> | |
6 <style type="text/css"> | |
7 .group > div { | |
8 display: inline-block; | |
9 overflow: hidden; | |
10 width: 72px; | |
11 height: 144px; | |
12 margin: 2px 10px; | |
13 border: 1px solid black; | |
14 padding: 5px; | |
15 background-color: gray; | |
16 } | |
17 | |
18 .group > div > div { position:relative; overflow: hidden; height:100
%; } | |
19 .group > div > div > * { position: absolute; width:36px; height:36px
; } | |
20 | |
21 .group > *:nth-child(1) > div > * { right: 0; } | |
22 .group > *:nth-child(2) > div > * { left: 0; bottom: 0; } | |
23 .group > *:nth-child(3) > div > * { left: 10px; bottom: -27px; } | |
24 .group > *:nth-child(4) > div > * { left: 1000px; } | |
25 .group > *:nth-child(5) > div > * { left: -1000px; } | |
26 .group > *:nth-child(6) > div > * { left: -9px; top: -10px; } | |
27 .group > *:nth-child(7) > div > * { left: 72px; } | |
28 .group > *:nth-child(8) > div > * { top: 72px; } | |
29 .group > *:nth-child(9) > div > * { left: -72px; } | |
30 .group > *:nth-child(10) > div > * { top: -72px; } | |
31 .group > *:nth-child(11) > div > * { left: 30px; top: 30px; } | |
32 .group > *:nth-child(12) > div > * { left: 18px; top: 54px; } | |
33 </style> | |
34 </head> | |
35 <body> | |
36 | |
37 <div class="group"> | |
38 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
39 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
40 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
41 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
42 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
43 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
44 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
45 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
46 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
47 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
48 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
49 <div><div><img src="resources/circle-small.svg" type="image/svg+xml"
></div></div> | |
50 </div> | |
51 | |
52 </body> | |
53 </html> | |
OLD | NEW |