Resizing .svg image using 'convert' function of ImageMagick suite produces empty images - svg

I have created a quick .svg of the StackOverflow logo, which looks like this:
With the following data in the .svg file itself:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1095 2549 c-464 -62 -875 -402 -1029 -850 -57 -168 -78 -379 -58
-579 44 -421 317 -806 706 -995 187 -91 340 -125 566 -125 222 0 378 34 558
120 142 68 239 138 352 250 113 113 184 213 250 353 95 199 127 366 117 622
-8 221 -61 406 -167 584 -70 118 -118 177 -225 279 -178 170 -382 278 -618
326 -95 20 -356 28 -452 15z m695 -466 c0 -5 22 -135 49 -291 27 -155 46 -284
42 -286 -3 -2 -27 -7 -53 -11 -44 -7 -47 -6 -53 16 -17 74 -95 552 -91 557 5
5 65 18 94 21 6 0 12 -2 12 -6z m-240 -344 c80 -117 153 -224 163 -240 l18
-28 -42 -31 -43 -31 -18 23 c-10 13 -84 121 -165 241 l-148 219 35 29 c19 16
39 29 45 29 5 0 75 -95 155 -211z m-195 -219 c132 -78 242 -143 244 -145 2 -2
-9 -25 -23 -50 -25 -41 -29 -44 -49 -34 -51 26 -467 281 -472 289 -7 11 43 92
53 87 4 -3 115 -69 247 -147z m-107 -221 c152 -40 279 -73 281 -75 5 -5 -30
-104 -37 -104 -12 0 -526 140 -543 148 -15 6 -15 12 -3 55 8 26 17 47 20 47 3
0 130 -32 282 -71z m-458 -384 l0 -265 405 0 405 0 0 265 0 265 40 0 40 0 0
-310 0 -310 -495 0 -495 0 0 310 0 310 50 0 50 0 0 -265z m390 165 c124 -11
245 -23 269 -27 l43 -6 -5 -50 c-4 -27 -8 -51 -9 -53 -2 -1 -134 9 -294 23
l-291 26 4 46 c7 66 10 72 35 66 13 -2 124 -14 248 -25z m300 -255 l0 -55
-295 0 -295 0 0 55 0 55 295 0 295 0 0 -55z"/>
</g>
</svg>
And I'm attempting to resize it to 30x30 like so:
convert stackoverflow-4-xxl.svg -resize 30x30 stackoverflow-4-xxl_s.svg
But this produces an empty image (even though data is still present, as seen in the .svg file itself, below)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="30" height="30">
<g style="" transform="scale(1.25,1.25)">
<g style="fill:#000000;stroke:none;" transform="matrix(0.1 0 0 -0.1 0 256)">
<g style="" transform="matrix(0.1 0 0 -0.1 0 256)">
<path d="M1095 2549 c-464 -62 -875 -402 -1029 -850 -57 -168 -78 -379 -58 -579 44 -421 317 -806 706 -995 187 -91 340 -125 566 -125 222 0 378 34 558 120 142 68 239 138 352 250 113 113 184 213 250 353 95 199 127 366 117 622 -8 221 -61 406 -167 584 -70 118 -118 177 -225 279 -178 170 -382 278 -618 326 -95 20 -356 28 -452 15z m695 -466 c0 -5 22 -135 49 -291 27 -155 46 -284 42 -286 -3 -2 -27 -7 -53 -11 -44 -7 -47 -6 -53 16 -17 74 -95 552 -91 557 5 5 65 18 94 21 6 0 12 -2 12 -6z m-240 -344 c80 -117 153 -224 163 -240 l18 -28 -42 -31 -43 -31 -18 23 c-10 13 -84 121 -165 241 l-148 219 35 29 c19 16 39 29 45 29 5 0 75 -95 155 -211z m-195 -219 c132 -78 242 -143 244 -145 2 -2 -9 -25 -23 -50 -25 -41 -29 -44 -49 -34 -51 26 -467 281 -472 289 -7 11 43 92 53 87 4 -3 115 -69 247 -147z m-107 -221 c152 -40 279 -73 281 -75 5 -5 -30 -104 -37 -104 -12 0 -526 140 -543 148 -15 6 -15 12 -3 55 8 26 17 47 20 47 3 0 130 -32 282 -71z m-458 -384 l0 -265 405 0 405 0 0 265 0 265 40 0 40 0 0 -310 0 -310 -495 0 -495 0 0 310 0 310 50 0 50 0 0 -265z m390 165 c124 -11 245 -23 269 -27 l43 -6 -5 -50 c-4 -27 -8 -51 -9 -53 -2 -1 -134 9 -294 23 l-291 26 4 46 c7 66 10 72 35 66 13 -2 124 -14 248 -25z m300 -255 l0 -55 -295 0 -295 0 0 55 0 55 295 0 295 0 0 -55z"/>
</g>
</g>
</g>
</svg>
So, just to see if resizing to the same size produces the original image (or therabouts), I did:
convert stackoverflow-4-xxl.svg -resize 256x256 stackoverflow-4-xxl_m.svg
And this still produced an empty image, with the .svg data identical except for:
<svg width="256" height="256">
Any idea where I'm going wrong?

You don't need to use a program.
Either:
hand edit the SVG. Change the width and height to 30px.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="30px" height="30px" viewBox="0 0 256.000000 256.000000"
preserveAspectRatio="xMidYMid meet">...
Or if you want to style its size with CSS, just remove the width and height.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256.000000 256.000000"
preserveAspectRatio="xMidYMid meet">...

Related

Filling in the enclosed space of an SVG?

So I converted a PNG sketch of a fashion model to an SVG because it made the lines look a lot cleaner and more defined. The end goal is to have the user click on a color and it fills in the the separate articles of clothing with the selected color. My only problem is I can't really figure out how (or if there is way) to simply fill in the space enclosed by an SVG.
I'm also not sure if the complexity of the SVG is a problem. Because it's a sketch it's composed of many short lines that the SVG format has made into seemingly one smooth line.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="370.000000pt" height="1000.000000pt" viewBox="0 0 370.000000 1000.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1885 9350 c-72 -9 -111 -18 -179 -43 -108 -40 -206 -235 -206 -411
0 -76 -2 -84 -26 -107 -24 -22 -26 -29 -21 -79 3 -31 17 -80 32 -110 34 -71
37 -83 36 -155 -1 -47 -7 -68 -27 -97 -17 -25 -24 -43 -19 -57 5 -16 2 -21
-13 -21 -27 0 -38 -17 -46 -68 -8 -51 -50 -99 -117 -132 -24 -12 -58 -33 -76
-46 -17 -13 -36 -24 -40 -24 -15 0 -80 -73 -98 -110 -29 -57 -62 -90 -184
-186 -76 -59 -132 -111 -161 -152 -169 -231 -190 -263 -190 -290 0 -16 -6 -50
-14 -76 -10 -33 -13 -79 -9 -164 5 -119 1 -149 -36 -254 -18 -53 -20 -82 -19
-339 0 -194 -3 -284 -11 -292 -6 -6 -11 -22 -11 -35 0 -13 -5 -32 -10 -42 -6
-10 -13 -70 -16 -132 l-6 -113 60 -120 c59 -116 130 -221 175 -258 12 -9 51
-32 86 -50 54 -27 71 -43 119 -112 30 -44 71 -96 90 -115 19 -19 42 -51 53
-71 10 -20 29 -49 42 -65 46 -55 49 -69 28 -111 -10 -21 -27 -86 -36 -145 -16
-101 -16 -119 0 -300 19 -215 19 -230 5 -517 -7 -129 -15 -215 -24 -235 -31
-72 -45 -125 -50 -201 -3 -44 -8 -112 -12 -152 -4 -44 -2 -83 5 -104 11 -32 0
-100 -21 -124 -17 -19 -8 -76 18 -115 20 -29 24 -43 16 -53 -13 -16 -38 -90
-47 -140 -4 -28 -2 -46 10 -64 15 -23 15 -26 -1 -38 -17 -12 -17 -19 -7 -67 7
-36 8 -85 2 -153 -5 -55 -7 -118 -4 -140 28 -253 39 -310 62 -333 13 -13 23
-33 23 -45 0 -13 16 -101 36 -197 19 -96 36 -184 36 -195 0 -11 9 -72 20 -135
23 -132 21 -230 -5 -258 -24 -26 -21 -41 8 -52 20 -8 25 -16 23 -37 -3 -24 1
-28 24 -31 26 -3 28 -6 28 -52 0 -57 -7 -80 -25 -80 -8 0 -16 -17 -20 -41 -7
-42 -26 -100 -69 -208 -52 -131 -44 -226 22 -260 20 -11 48 -30 62 -43 27 -26
68 -51 120 -74 19 -9 55 -28 80 -44 25 -15 88 -43 140 -62 l95 -33 215 0 c190
0 219 2 243 18 22 14 27 25 27 57 0 53 -11 78 -59 130 -22 25 -41 48 -41 52 0
3 -38 50 -85 104 -47 54 -85 102 -85 106 0 13 46 9 143 -13 50 -12 124 -27
162 -34 69 -12 253 -85 265 -105 13 -22 156 -41 315 -43 183 -2 244 12 271 64
27 53 19 88 -32 136 -26 24 -51 43 -56 43 -5 0 -25 12 -45 28 -20 15 -66 43
-102 63 -52 28 -71 45 -89 80 -33 62 -49 77 -117 111 -68 33 -115 74 -115 99
0 22 -65 79 -89 79 -37 0 -44 25 -37 118 13 149 15 160 29 189 16 33 31 99 53
238 8 55 24 140 34 189 11 49 27 141 36 205 9 63 20 124 25 133 5 10 14 96 20
190 6 103 16 189 25 212 11 28 12 42 4 51 -8 10 -7 16 2 24 65 52 98 87 103
110 3 16 17 43 30 61 13 18 21 38 17 44 -10 16 -3 122 13 196 8 36 26 128 41
205 15 77 40 181 56 230 44 138 50 184 37 323 -9 93 -9 144 0 215 7 50 16 207
21 347 11 288 14 310 42 310 11 0 33 14 50 31 30 29 31 32 25 99 -3 37 -11 86
-18 108 -11 38 -10 43 26 100 40 65 64 124 65 159 0 13 -15 40 -33 60 -23 26
-39 58 -49 103 -21 84 -35 120 -48 120 -5 0 -10 4 -10 9 0 5 -5 22 -11 38 -25
59 -60 158 -60 168 0 6 3 49 8 96 5 47 5 101 0 120 -4 19 -10 124 -14 234 l-5
200 35 32 c49 44 53 76 22 158 -14 37 -25 82 -25 100 0 38 -32 116 -56 136
-14 11 -15 26 -9 92 4 47 3 83 -3 90 -6 7 -15 48 -22 91 -6 44 -15 89 -20 100
-4 12 -13 41 -20 66 -25 90 -80 231 -100 257 -11 14 -20 31 -20 38 0 18 -27
38 -110 81 -103 53 -103 53 -69 92 16 18 29 41 29 52 0 32 -19 70 -37 77 -35
12 -53 46 -53 101 0 59 -20 115 -45 129 -15 9 -9 24 53 134 39 69 83 160 97
204 l27 79 -20 17 c-20 15 -20 22 -12 112 5 53 7 103 4 110 -3 9 9 21 33 32
39 19 135 96 185 150 67 73 15 150 -132 195 -25 7 -49 17 -54 22 -6 4 -15 8
-22 8 -6 0 -31 19 -55 43 -63 60 -106 96 -142 117 -58 33 -240 53 -362 40z
m276 -51 c38 -11 82 -31 98 -42 97 -73 120 -91 118 -93 -1 -1 -22 2 -47 6 -25
5 -97 9 -160 9 -135 0 -248 -25 -350 -80 -87 -46 -240 -188 -261 -241 -23 -59
-30 -27 -18 79 7 59 19 108 38 148 16 33 34 75 41 92 13 34 90 93 120 93 10 0
35 7 56 17 34 14 137 27 257 31 22 1 70 -7 108 -19z m214 -180 c38 -11 100
-30 137 -41 74 -22 137 -63 138 -89 0 -25 -103 -123 -182 -174 l-37 -23 -6 40
c-9 54 -66 161 -102 192 -54 49 -99 58 -240 53 -118 -4 -135 -7 -213 -39 -47
-19 -110 -47 -140 -62 -69 -35 -49 -15 56 56 66 45 97 59 170 76 121 29 125
29 244 31 80 1 121 -4 175 -20z m-108 -109 c59 -34 97 -95 109 -177 3 -26 11
-56 15 -65 13 -24 -1 -208 -15 -208 -13 0 -124 56 -144 73 -16 13 -333 11
-433 -3 -37 -5 -107 -23 -157 -40 -49 -16 -93 -30 -97 -30 -3 0 -17 25 -31 55
-41 94 -27 183 25 156 32 -18 41 -13 41 21 0 36 55 93 124 128 37 19 218 99
256 113 8 3 69 6 135 6 115 1 122 0 172 -29z m31 -457 c61 -31 112 -61 112
-67 -1 -31 -79 -212 -110 -251 -4 -5 -23 -40 -43 -76 l-35 -67 28 -27 c24 -23
29 -37 35 -103 7 -74 9 -79 51 -119 44 -43 56 -76 30 -86 -8 -3 -25 -28 -38
-56 l-24 -49 42 -7 c24 -3 58 -16 76 -28 18 -13 52 -33 75 -46 34 -20 47 -36
76 -100 19 -42 39 -89 45 -106 56 -157 101 -382 95 -475 -4 -59 -2 -68 21 -95
27 -31 51 -98 43 -120 -3 -6 6 -38 19 -71 28 -68 31 -122 9 -131 -9 -3 -25
-23 -35 -43 -17 -33 -20 -61 -20 -212 -1 -95 4 -198 11 -228 13 -62 13 -83 -1
-194 -8 -65 -7 -82 5 -100 9 -11 20 -39 26 -61 6 -22 33 -90 60 -151 27 -61
49 -121 49 -134 0 -14 15 -40 36 -61 35 -36 36 -38 24 -76 -7 -21 -21 -50 -32
-65 -10 -15 -30 -52 -44 -82 -21 -46 -33 -59 -82 -86 -31 -18 -75 -47 -97 -65
-22 -17 -67 -49 -100 -71 -55 -36 -65 -39 -130 -39 -38 0 -108 10 -155 21 -47
12 -116 29 -155 38 -38 10 -117 33 -175 51 -60 19 -109 30 -114 25 -5 -5 -19
-5 -32 1 -49 18 -151 37 -202 38 -29 0 -61 3 -71 6 -20 6 -33 46 -20 66 4 8
-7 30 -31 58 -57 69 -83 127 -77 173 7 50 -15 142 -53 223 -16 35 -30 70 -30
77 -1 7 -14 29 -30 48 -22 25 -30 45 -30 72 0 23 -9 53 -24 76 -21 33 -23 46
-18 113 3 61 1 81 -13 102 -15 23 -15 33 -4 84 7 32 16 63 21 70 5 6 13 87 18
180 7 154 23 243 42 243 5 0 8 7 8 15 0 9 9 33 20 55 25 49 25 81 0 153 -12
35 -22 92 -24 149 -6 134 -72 378 -102 378 -24 0 -23 -17 10 -131 19 -63 37
-143 40 -179 12 -118 24 -194 40 -251 l16 -55 -44 -85 -44 -85 -6 -165 c-4
-90 -11 -173 -16 -184 -4 -11 -13 -60 -19 -109 -9 -76 -8 -92 4 -106 18 -20
20 -45 11 -141 -7 -74 -7 -75 18 -87 25 -11 32 -30 27 -76 -1 -11 10 -31 23
-45 26 -28 100 -210 112 -274 4 -23 2 -42 -6 -52 -17 -21 23 -124 77 -196 40
-53 44 -63 45 -122 2 -69 -8 -91 -45 -103 -12 -3 -46 -24 -75 -46 -47 -37 -52
-44 -52 -79 0 -22 -4 -39 -9 -39 -13 0 -153 155 -172 192 -10 18 -27 52 -38
76 -11 23 -31 53 -43 66 -13 13 -24 30 -26 37 -2 8 -12 23 -22 34 -10 11 -25
35 -34 53 -9 17 -20 32 -25 32 -4 0 -43 47 -86 105 -70 95 -84 109 -139 135
-75 35 -120 76 -151 139 -14 27 -32 54 -40 61 -8 7 -15 20 -15 30 0 10 -7 23
-15 30 -8 6 -25 36 -38 64 -22 47 -24 63 -20 152 3 56 14 129 25 169 18 62 21
102 23 350 2 231 5 290 19 335 34 110 36 127 35 255 -2 161 17 250 67 315 18
25 56 79 84 121 58 89 118 147 218 214 40 26 78 57 83 67 5 10 15 18 22 18 14
0 31 24 63 91 24 49 95 116 154 146 40 21 88 54 147 101 34 28 42 41 47 82 6
41 11 49 37 60 26 11 30 17 25 40 -3 19 1 34 14 47 14 15 20 43 25 111 l7 90
37 10 c20 5 72 20 116 32 57 16 121 24 225 29 259 12 233 15 358 -46z m579
-3590 c-4 -3 -3 -11 2 -17 13 -17 22 -119 11 -136 -5 -8 -29 -20 -52 -25 -51
-13 -45 14 -53 -265 -3 -113 -13 -279 -22 -369 -14 -140 -14 -184 -4 -300 l12
-136 -39 -120 c-22 -66 -52 -190 -66 -275 -15 -85 -31 -163 -36 -172 -14 -26
-31 -185 -24 -223 5 -27 2 -35 -15 -44 -12 -7 -21 -17 -21 -23 0 -24 -42 -98
-56 -98 -8 0 -24 -10 -35 -21 -16 -16 -20 -29 -16 -54 4 -25 1 -38 -15 -52
-16 -14 -19 -26 -14 -54 8 -50 -11 -329 -24 -344 -5 -6 -17 -61 -26 -121 -9
-60 -31 -190 -49 -289 -19 -99 -39 -214 -46 -255 -14 -92 -31 -128 -65 -136
-26 -7 -291 0 -299 7 -2 2 0 42 5 89 5 47 14 192 21 322 10 191 10 250 0 305
-17 90 -12 496 7 515 18 18 15 33 -12 65 -19 23 -24 44 -30 125 -7 91 -6 99
14 120 26 29 23 62 -7 66 -30 4 -29 8 8 50 34 38 33 28 6 189 -9 58 -27 109
-57 169 l-43 86 27 86 c23 75 25 88 12 100 -39 40 -76 -37 -139 -289 -14 -53
-29 -105 -35 -116 -23 -41 -34 -193 -21 -274 12 -75 11 -88 -13 -120 -9 -13
-8 -20 5 -33 8 -9 20 -16 26 -16 19 0 12 -16 -11 -28 -13 -6 -40 -17 -62 -24
-45 -15 -60 -44 -53 -100 6 -42 -20 -86 -94 -163 l-38 -40 -4 -245 c-2 -135
-10 -321 -17 -413 -10 -124 -10 -173 -2 -190 6 -12 14 -89 16 -172 7 -197 9
-209 24 -228 8 -9 12 -33 10 -58 -4 -50 -1 -49 -168 -79 -132 -25 -130 -25
-130 5 0 14 -7 28 -15 31 -8 4 -13 9 -11 13 2 3 9 41 15 83 8 60 8 86 -3 124
-8 27 -17 83 -20 124 -4 41 -13 100 -20 130 -8 30 -19 80 -25 110 -5 30 -15
82 -22 115 -6 33 -14 79 -19 103 -4 24 -17 56 -29 72 -28 38 -41 150 -50 425
-6 168 -5 212 6 221 17 15 17 65 -2 91 -13 19 -13 25 0 57 8 19 15 46 15 59 0
13 7 32 15 43 23 30 19 69 -10 88 -24 16 -36 66 -16 66 5 0 14 29 21 64 9 50
9 73 0 101 -9 28 -9 59 -1 130 6 51 11 116 11 143 0 53 12 100 38 147 11 20
19 70 24 150 4 66 12 185 18 265 8 114 7 173 -5 275 -31 285 -30 318 14 483
14 50 24 53 41 13 6 -17 52 -72 101 -123 49 -51 89 -96 89 -100 0 -5 8 -8 18
-8 20 0 135 107 136 126 1 6 16 25 35 43 26 24 32 36 27 55 -3 14 -2 28 4 31
5 3 10 17 10 31 0 13 3 24 6 24 3 0 50 -9 104 -20 54 -11 125 -24 157 -29 32
-5 101 -21 153 -35 52 -15 120 -31 150 -37 30 -6 64 -15 75 -20 11 -5 58 -20
105 -35 112 -35 213 -31 277 9 24 15 45 27 47 27 3 0 36 23 73 51 37 28 84 59
103 68 19 9 39 22 43 29 4 6 13 12 19 12 6 0 8 -3 5 -7z m-1405 -150 c-11 -16
-34 -41 -51 -57 -29 -28 -31 -28 -31 -8 0 13 17 34 46 57 56 42 61 43 36 8z
m349 -1340 c37 -61 49 -92 74 -193 13 -52 26 -102 30 -112 4 -11 -6 -30 -29
-56 -40 -44 -43 -57 -19 -84 14 -15 14 -22 4 -42 -9 -15 -11 -41 -7 -72 3 -27
6 -79 5 -116 0 -65 1 -68 26 -78 24 -9 25 -12 14 -27 -19 -23 -27 -555 -8
-589 9 -17 10 -63 4 -181 -4 -87 -7 -170 -6 -186 1 -15 -3 -56 -9 -90 -6 -34
-15 -125 -20 -202 -12 -164 -36 -274 -69 -308 -15 -17 -29 -54 -41 -112 -11
-47 -31 -108 -46 -135 l-26 -48 -73 76 c-69 72 -73 78 -78 132 -4 31 -13 70
-22 86 -8 16 -15 50 -15 76 0 26 -7 73 -16 105 -9 35 -17 117 -20 208 -2 83
-9 167 -16 188 -9 28 -8 59 1 130 7 50 15 214 17 362 3 149 7 279 9 291 3 12
34 54 71 95 64 72 65 74 59 116 -9 65 -1 79 58 99 29 9 58 21 65 27 18 14 15
51 -7 71 -16 14 -17 22 -8 46 8 22 8 45 -1 88 -7 32 -9 81 -6 108 7 63 44 234
54 255 5 9 11 37 15 63 4 25 9 46 10 46 2 0 13 -17 26 -37z m411 -2182 c-3
-120 6 -147 55 -167 48 -20 73 -42 73 -65 0 -20 78 -88 136 -117 23 -12 53
-35 65 -52 59 -77 91 -108 136 -130 26 -13 71 -41 100 -62 29 -21 55 -38 60
-38 4 0 22 -14 40 -32 66 -64 37 -111 -79 -129 -77 -13 -57 -13 -218 0 -145
11 -170 19 -370 108 -30 14 -77 28 -105 33 -27 5 -70 14 -95 20 -25 7 -92 19
-149 27 -97 14 -106 18 -140 52 l-37 37 28 44 c34 53 65 134 79 204 14 71 29
106 45 106 16 0 17 6 45 151 l22 116 156 -4 156 -4 -3 -98z m-733 -205 c6 -25
11 -59 11 -76 0 -27 13 -44 75 -104 63 -60 75 -77 75 -104 0 -26 11 -44 55
-87 30 -31 55 -60 55 -65 0 -17 67 -114 100 -145 18 -16 57 -62 86 -102 30
-39 58 -75 64 -78 12 -7 13 -55 2 -72 -16 -26 -69 -33 -234 -33 -169 0 -171 0
-277 36 -58 19 -122 45 -141 58 -19 12 -51 28 -70 36 -42 16 -140 79 -140 89
0 4 -12 14 -27 22 -42 21 -49 31 -56 76 -8 49 25 169 74 265 5 9 12 36 15 58
4 23 17 57 30 76 18 26 24 49 24 87 l0 53 88 17 c48 10 94 22 102 27 8 6 29
10 46 10 29 0 33 -4 43 -44z"/>
</g>
</svg>
If I change the "fill" attribute, I only change the color of the outline. I also can't change the color of the background because the area I want to fill is a more complex shape. Blow is the PNG of the image that I converted to SVG so you get an idea of the shape.
Imgur link to picture
As #ccprog explained you have a hollow path already filled with black. This is how to solve the problem:
I've changed the d attribute of the path to all-absolute. Ypu can do it using this pen by Lea Verou: Convert SVG path to all-relative or all-absolute
Split the d attribute of the path by the "M" command and create other paths using the fragments as the d attribute.
Fill the resulting paths with loud colors so that you can identify the path.
Next you can fill them with the colors you like.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="200" viewBox="0 0 370.000000 1000.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)">
<path id="outline" d="M1885,9350C1813,9341,1774,9332,1706,9307C1598,9267,1500,9072,1500,8896C1500,8820,1498,8812,1474,8789C1450,8767,1448,8760,1453,8710C1456,8679,1470,8630,1485,8600C1519,8529,1522,8517,1521,8445C1520,8398,1514,8377,1494,8348C1477,8323,1470,8305,1475,8291C1480,8275,1477,8270,1462,8270C1435,8270,1424,8253,1416,8202C1408,8151,1366,8103,1299,8070C1275,8058,1241,8037,1223,8024C1206,8011,1187,8000,1183,8000C1168,8000,1103,7927,1085,7890C1056,7833,1023,7800,901,7704C825,7645,769,7593,740,7552C571,7321,550,7289,550,7262C550,7246,544,7212,536,7186C526,7153,523,7107,527,7022C532,6903,528,6873,491,6768C473,6715,471,6686,472,6429C472,6235,469,6145,461,6137C455,6131,450,6115,450,6102C450,6089,445,6070,440,6060C434,6050,427,5990,424,5928L418,5815L478,5695C537,5579,608,5474,653,5437C665,5428,704,5405,739,5387C793,5360,810,5344,858,5275C888,5231,929,5179,948,5160C967,5141,990,5109,1001,5089C1011,5069,1030,5040,1043,5024C1089,4969,1092,4955,1071,4913C1061,4892,1044,4827,1035,4768C1019,4667,1019,4649,1035,4468C1054,4253,1054,4238,1040,3951C1033,3822,1025,3736,1016,3716C985,3644,971,3591,966,3515C963,3471,958,3403,954,3363C950,3319,952,3280,959,3259C970,3227,959,3159,938,3135C921,3116,930,3059,956,3020C976,2991,980,2977,972,2967C959,2951,934,2877,925,2827C921,2799,923,2781,935,2763C950,2740,950,2737,934,2725C917,2713,917,2706,927,2658C934,2622,935,2573,929,2505C924,2450,922,2387,925,2365C953,2112,964,2055,987,2032C1000,2019,1010,1999,1010,1987C1010,1974,1026,1886,1046,1790C1065,1694,1082,1606,1082,1595C1082,1584,1091,1523,1102,1460C1125,1328,1123,1230,1097,1202C1073,1176,1076,1161,1105,1150C1125,1142,1130,1134,1128,1113C1125,1089,1129,1085,1152,1082C1178,1079,1180,1076,1180,1030C1180,973,1173,950,1155,950C1147,950,1139,933,1135,909C1128,867,1109,809,1066,701C1014,570,1022,475,1088,441C1108,430,1136,411,1150,398C1177,372,1218,347,1270,324C1289,315,1325,296,1350,280C1375,265,1438,237,1490,218L1585,185L1800,185C1990,185,2019,187,2043,203C2065,217,2070,228,2070,260C2070,313,2059,338,2011,390C1989,415,1970,438,1970,442C1970,445,1932,492,1885,546C1838,600,1800,648,1800,652C1800,665,1846,661,1943,639C1993,627,2067,612,2105,605C2174,593,2358,520,2370,500C2383,478,2526,459,2685,457C2868,455,2929,469,2956,521C2983,574,2975,609,2924,657C2898,681,2873,700,2868,700C2863,700,2843,712,2823,728C2803,743,2757,771,2721,791C2669,819,2650,836,2632,871C2599,933,2583,948,2515,982C2447,1015,2400,1056,2400,1081C2400,1103,2335,1160,2311,1160C2274,1160,2267,1185,2274,1278C2287,1427,2289,1438,2303,1467C2319,1500,2334,1566,2356,1705C2364,1760,2380,1845,2390,1894C2401,1943,2417,2035,2426,2099C2435,2162,2446,2223,2451,2232C2456,2242,2465,2328,2471,2422C2477,2525,2487,2611,2496,2634C2507,2662,2508,2676,2500,2685C2492,2695,2493,2701,2502,2709C2567,2761,2600,2796,2605,2819C2608,2835,2622,2862,2635,2880C2648,2898,2656,2918,2652,2924C2642,2940,2649,3046,2665,3120C2673,3156,2691,3248,2706,3325C2721,3402,2746,3506,2762,3555C2806,3693,2812,3739,2799,3878C2790,3971,2790,4022,2799,4093C2806,4143,2815,4300,2820,4440C2831,4728,2834,4750,2862,4750C2873,4750,2895,4764,2912,4781C2942,4810,2943,4813,2937,4880C2934,4917,2926,4966,2919,4988C2908,5026,2909,5031,2945,5088C2985,5153,3009,5212,3010,5247C3010,5260,2995,5287,2977,5307C2954,5333,2938,5365,2928,5410C2907,5494,2893,5530,2880,5530C2875,5530,2870,5534,2870,5539C2870,5544,2865,5561,2859,5577C2834,5636,2799,5735,2799,5745C2799,5751,2802,5794,2807,5841C2812,5888,2812,5942,2807,5961C2803,5980,2797,6085,2793,6195L2788,6395L2823,6427C2872,6471,2876,6503,2845,6585C2831,6622,2820,6667,2820,6685C2820,6723,2788,6801,2764,6821C2750,6832,2749,6847,2755,6913C2759,6960,2758,6996,2752,7003C2746,7010,2737,7051,2730,7094C2724,7138,2715,7183,2710,7194C2706,7206,2697,7235,2690,7260C2665,7350,2610,7491,2590,7517C2579,7531,2570,7548,2570,7555C2570,7573,2543,7593,2460,7636C2357,7689,2357,7689,2391,7728C2407,7746,2420,7769,2420,7780C2420,7812,2401,7850,2383,7857C2348,7869,2330,7903,2330,7958C2330,8017,2310,8073,2285,8087C2270,8096,2276,8111,2338,8221C2377,8290,2421,8381,2435,8425L2462,8504L2442,8521C2422,8536,2422,8543,2430,8633C2435,8686,2437,8736,2434,8743C2431,8752,2443,8764,2467,8775C2506,8794,2602,8871,2652,8925C2719,8998,2667,9075,2520,9120C2495,9127,2471,9137,2466,9142C2460,9146,2451,9150,2444,9150C2438,9150,2413,9169,2389,9193C2326,9253,2283,9289,2247,9310C2189,9343,2007,9363,1885,9350Z" fill="black"/>
<path id="cap" d=" M2161,9299C2199,9288,2243,9268,2259,9257C2356,9184,2379,9166,2377,9164C2376,9163,2355,9166,2330,9170C2305,9175,2233,9179,2170,9179C2035,9179,1922,9154,1820,9099C1733,9053,1580,8911,1559,8858C1536,8799,1529,8831,1541,8937C1548,8996,1560,9045,1579,9085C1595,9118,1613,9160,1620,9177C1633,9211,1710,9270,1740,9270C1750,9270,1775,9277,1796,9287C1830,9301,1933,9314,2053,9318C2075,9319,2123,9311,2161,9299Z" fill="red"/>
<path id="peak" d=" M2375,9119C2413,9108,2475,9089,2512,9078C2586,9056,2649,9015,2650,8989C2650,8964,2547,8866,2468,8815L2431,8792L2425,8832C2416,8886,2359,8993,2323,9024C2269,9073,2224,9082,2083,9077C1965,9073,1948,9070,1870,9038C1823,9019,1760,8991,1730,8976C1661,8941,1681,8961,1786,9032C1852,9077,1883,9091,1956,9108C2077,9137,2081,9137,2200,9139C2280,9140,2321,9135,2375,9119Z" fill="pink" />
<path id="eyes" d="M2267,9010C2326,8976,2364,8915,2376,8833C2379,8807,2387,8777,2391,8768C2404,8744,2390,8560,2376,8560C2363,8560,2252,8616,2232,8633C2216,8646,1899,8644,1799,8630C1762,8625,1692,8607,1642,8590C1593,8574,1549,8560,1545,8560C1542,8560,1528,8585,1514,8615C1473,8709,1487,8798,1539,8771C1571,8753,1580,8758,1580,8792C1580,8828,1635,8885,1704,8920C1741,8939,1922,9019,1960,9033C1968,9036,2029,9039,2095,9039C2210,9040,2217,9039,2267,9010Z" fill="purple" />
<path id="blouse" d="M2298,8553C2359,8522,2410,8492,2410,8486C2409,8455,2331,8274,2300,8235C2296,8230,2277,8195,2257,8159L2222,8092L2250,8065C2274,8042,2279,8028,2285,7962C2292,7888,2294,7883,2336,7843C2380,7800,2392,7767,2366,7757C2358,7754,2341,7729,2328,7701L2304,7652L2346,7645C2370,7642,2404,7629,2422,7617C2440,7604,2474,7584,2497,7571C2531,7551,2544,7535,2573,7471C2592,7429,2612,7382,2618,7365C2674,7208,2719,6983,2713,6890C2709,6831,2711,6822,2734,6795C2761,6764,2785,6697,2777,6675C2774,6669,2783,6637,2796,6604C2824,6536,2827,6482,2805,6473C2796,6470,2780,6450,2770,6430C2753,6397,2750,6369,2750,6218C2749,6123,2754,6020,2761,5990C2774,5928,2774,5907,2760,5796C2752,5731,2753,5714,2765,5696C2774,5685,2785,5657,2791,5635C2797,5613,2824,5545,2851,5484C2878,5423,2900,5363,2900,5350C2900,5336,2915,5310,2936,5289C2971,5253,2972,5251,2960,5213C2953,5192,2939,5163,2928,5148C2918,5133,2898,5096,2884,5066C2863,5020,2851,5007,2802,4980C2771,4962,2727,4933,2705,4915C2683,4898,2638,4866,2605,4844C2550,4808,2540,4805,2475,4805C2437,4805,2367,4815,2320,4826C2273,4838,2204,4855,2165,4864C2127,4874,2048,4897,1990,4915C1930,4934,1881,4945,1876,4940C1871,4935,1857,4935,1844,4941C1795,4959,1693,4978,1642,4979C1613,4979,1581,4982,1571,4985C1551,4991,1538,5031,1551,5051C1555,5059,1544,5081,1520,5109C1463,5178,1437,5236,1443,5282C1450,5332,1428,5424,1390,5505C1374,5540,1360,5575,1360,5582C1359,5589,1346,5611,1330,5630C1308,5655,1300,5675,1300,5702C1300,5725,1291,5755,1276,5778C1255,5811,1253,5824,1258,5891C1261,5952,1259,5972,1245,5993C1230,6016,1230,6026,1241,6077C1248,6109,1257,6140,1262,6147C1267,6153,1275,6234,1280,6327C1287,6481,1303,6570,1322,6570C1327,6570,1330,6577,1330,6585C1330,6594,1339,6618,1350,6640C1375,6689,1375,6721,1350,6793C1338,6828,1328,6885,1326,6942C1320,7076,1254,7320,1224,7320C1200,7320,1201,7303,1234,7189C1253,7126,1271,7046,1274,7010C1286,6892,1298,6816,1314,6759L1330,6704L1286,6619L1242,6534L1236,6369C1232,6279,1225,6196,1220,6185C1216,6174,1207,6125,1201,6076C1192,6000,1193,5984,1205,5970C1223,5950,1225,5925,1216,5829C1209,5755,1209,5754,1234,5742C1259,5731,1266,5712,1261,5666C1260,5655,1271,5635,1284,5621C1310,5593,1384,5411,1396,5347C1400,5324,1398,5305,1390,5295C1373,5274,1413,5171,1467,5099C1507,5046,1511,5036,1512,4977C1514,4908,1504,4886,1467,4874C1455,4871,1421,4850,1392,4828C1345,4791,1340,4784,1340,4749C1340,4727,1336,4710,1331,4710C1318,4710,1178,4865,1159,4902C1149,4920,1132,4954,1121,4978C1110,5001,1090,5031,1078,5044C1065,5057,1054,5074,1052,5081C1050,5089,1040,5104,1030,5115C1020,5126,1005,5150,996,5168C987,5185,976,5200,971,5200C967,5200,928,5247,885,5305C815,5400,801,5414,746,5440C671,5475,626,5516,595,5579C581,5606,563,5633,555,5640C547,5647,540,5660,540,5670C540,5680,533,5693,525,5700C517,5706,500,5736,487,5764C465,5811,463,5827,467,5916C470,5972,481,6045,492,6085C510,6147,513,6187,515,6435C517,6666,520,6725,534,6770C568,6880,570,6897,569,7025C567,7186,586,7275,636,7340C654,7365,692,7419,720,7461C778,7550,838,7608,938,7675C978,7701,1016,7732,1021,7742C1026,7752,1036,7760,1043,7760C1057,7760,1074,7784,1106,7851C1130,7900,1201,7967,1260,7997C1300,8018,1348,8051,1407,8098C1441,8126,1449,8139,1454,8180C1460,8221,1465,8229,1491,8240C1517,8251,1521,8257,1516,8280C1513,8299,1517,8314,1530,8327C1544,8342,1550,8370,1555,8438L1562,8528L1599,8538C1619,8543,1671,8558,1715,8570C1772,8586,1836,8594,1940,8599C2199,8611,2173,8614,2298,8553Z" fill="darkgreen"/>
<path id="pants" d="M2877,4963C2873,4960,2874,4952,2879,4946C2892,4929,2901,4827,2890,4810C2885,4802,2861,4790,2838,4785C2787,4772,2793,4799,2785,4520C2782,4407,2772,4241,2763,4151C2749,4011,2749,3967,2759,3851L2771,3715L2732,3595C2710,3529,2680,3405,2666,3320C2651,3235,2635,3157,2630,3148C2616,3122,2599,2963,2606,2925C2611,2898,2608,2890,2591,2881C2579,2874,2570,2864,2570,2858C2570,2834,2528,2760,2514,2760C2506,2760,2490,2750,2479,2739C2463,2723,2459,2710,2463,2685C2467,2660,2464,2647,2448,2633C2432,2619,2429,2607,2434,2579C2442,2529,2423,2250,2410,2235C2405,2229,2393,2174,2384,2114C2375,2054,2353,1924,2335,1825C2316,1726,2296,1611,2289,1570C2275,1478,2258,1442,2224,1434C2198,1427,1933,1434,1925,1441C1923,1443,1925,1483,1930,1530C1935,1577,1944,1722,1951,1852C1961,2043,1961,2102,1951,2157C1934,2247,1939,2653,1958,2672C1976,2690,1973,2705,1946,2737C1927,2760,1922,2781,1916,2862C1909,2953,1910,2961,1930,2982C1956,3011,1953,3044,1923,3048C1893,3052,1894,3056,1931,3098C1965,3136,1964,3126,1937,3287C1928,3345,1910,3396,1880,3456L1837,3542L1864,3628C1887,3703,1889,3716,1876,3728C1837,3768,1800,3691,1737,3439C1723,3386,1708,3334,1702,3323C1679,3282,1668,3130,1681,3049C1693,2974,1692,2961,1668,2929C1659,2916,1660,2909,1673,2896C1681,2887,1693,2880,1699,2880C1718,2880,1711,2864,1688,2852C1675,2846,1648,2835,1626,2828C1581,2813,1566,2784,1573,2728C1579,2686,1553,2642,1479,2565L1441,2525L1437,2280C1435,2145,1427,1959,1420,1867C1410,1743,1410,1694,1418,1677C1424,1665,1432,1588,1434,1505C1441,1308,1443,1296,1458,1277C1466,1268,1470,1244,1468,1219C1464,1169,1467,1170,1300,1140C1168,1115,1170,1115,1170,1145C1170,1159,1163,1173,1155,1176C1147,1180,1142,1185,1144,1189C1146,1192,1153,1230,1159,1272C1167,1332,1167,1358,1156,1396C1148,1423,1139,1479,1136,1520C1132,1561,1123,1620,1116,1650C1108,1680,1097,1730,1091,1760C1086,1790,1076,1842,1069,1875C1063,1908,1055,1954,1050,1978C1046,2002,1033,2034,1021,2050C993,2088,980,2200,971,2475C965,2643,966,2687,977,2696C994,2711,994,2761,975,2787C962,2806,962,2812,975,2844C983,2863,990,2890,990,2903C990,2916,997,2935,1005,2946C1028,2976,1024,3015,995,3034C971,3050,959,3100,979,3100C984,3100,993,3129,1000,3164C1009,3214,1009,3237,1000,3265C991,3293,991,3324,999,3395C1005,3446,1010,3511,1010,3538C1010,3591,1022,3638,1048,3685C1059,3705,1067,3755,1072,3835C1076,3901,1084,4020,1090,4100C1098,4214,1097,4273,1085,4375C1054,4660,1055,4693,1099,4858C1113,4908,1123,4911,1140,4871C1146,4854,1192,4799,1241,4748C1290,4697,1330,4652,1330,4648C1330,4643,1338,4640,1348,4640C1368,4640,1483,4747,1484,4766C1485,4772,1500,4791,1519,4809C1545,4833,1551,4845,1546,4864C1543,4878,1544,4892,1550,4895C1555,4898,1560,4912,1560,4926C1560,4939,1563,4950,1566,4950C1569,4950,1616,4941,1670,4930C1724,4919,1795,4906,1827,4901C1859,4896,1928,4880,1980,4866C2032,4851,2100,4835,2130,4829C2160,4823,2194,4814,2205,4809C2216,4804,2263,4789,2310,4774C2422,4739,2523,4743,2587,4783C2611,4798,2632,4810,2634,4810C2637,4810,2670,4833,2707,4861C2744,4889,2791,4920,2810,4929C2829,4938,2849,4951,2853,4958C2857,4964,2866,4970,2872,4970C2878,4970,2880,4967,2877,4963Z" fill="lightgreen"/>
<path id="sleevetip" d="M1472,4813C1461,4797,1438,4772,1421,4756C1392,4728,1390,4728,1390,4748C1390,4761,1407,4782,1436,4805C1492,4847,1497,4848,1472,4813Z" fill="black"/>
<path id="hole" d="M1821,3473C1858,3412,1870,3381,1895,3280C1908,3228,1921,3178,1925,3168C1929,3157,1919,3138,1896,3112C1856,3068,1853,3055,1877,3028C1891,3013,1891,3006,1881,2986C1872,2971,1870,2945,1874,2914C1877,2887,1880,2835,1879,2798C1879,2733,1880,2730,1905,2720C1929,2711,1930,2708,1919,2693C1900,2670,1892,2138,1911,2104C1920,2087,1921,2041,1915,1923C1911,1836,1908,1753,1909,1737C1910,1722,1906,1681,1900,1647C1894,1613,1885,1522,1880,1445C1868,1281,1844,1171,1811,1137C1796,1120,1782,1083,1770,1025C1759,978,1739,917,1724,890L1698,842L1625,918C1556,990,1552,996,1547,1050C1543,1081,1534,1120,1525,1136C1517,1152,1510,1186,1510,1212C1510,1238,1503,1285,1494,1317C1485,1352,1477,1434,1474,1525C1472,1608,1465,1692,1458,1713C1449,1741,1450,1772,1459,1843C1466,1893,1474,2057,1476,2205C1479,2354,1483,2484,1485,2496C1488,2508,1519,2550,1556,2591C1620,2663,1621,2665,1615,2707C1606,2772,1614,2786,1673,2806C1702,2815,1731,2827,1738,2833C1756,2847,1753,2884,1731,2904C1715,2918,1714,2926,1723,2950C1731,2972,1731,2995,1722,3038C1715,3070,1713,3119,1716,3146C1723,3209,1760,3380,1770,3401C1775,3410,1781,3438,1785,3464C1789,3489,1794,3510,1795,3510C1797,3510,1808,3493,1821,3473Z" fill="white"/>
<path id="rightshoe" d="M2232,1291C2229,1171,2238,1144,2287,1124C2335,1104,2360,1082,2360,1059C2360,1039,2438,971,2496,942C2519,930,2549,907,2561,890C2620,813,2652,782,2697,760C2723,747,2768,719,2797,698C2826,677,2852,660,2857,660C2861,660,2879,646,2897,628C2963,564,2934,517,2818,499C2741,486,2761,486,2600,499C2455,510,2430,518,2230,607C2200,621,2153,635,2125,640C2098,645,2055,654,2030,660C2005,667,1938,679,1881,687C1784,701,1775,705,1741,739L1704,776L1732,820C1766,873,1797,954,1811,1024C1825,1095,1840,1130,1856,1130C1872,1130,1873,1136,1901,1281L1923,1397L2079,1393L2235,1389L2232,1291Z" fill="blue"/>
<path id="leftshoe" d="M1499,1086C1505,1061,1510,1027,1510,1010C1510,983,1523,966,1585,906C1648,846,1660,829,1660,802C1660,776,1671,758,1715,715C1745,684,1770,655,1770,650C1770,633,1837,536,1870,505C1888,489,1927,443,1956,403C1986,364,2014,328,2020,325C2032,318,2033,270,2022,253C2006,227,1953,220,1788,220C1619,220,1617,220,1511,256C1453,275,1389,301,1370,314C1351,326,1319,342,1300,350C1258,366,1160,429,1160,439C1160,443,1148,453,1133,461C1091,482,1084,492,1077,537C1069,586,1102,706,1151,802C1156,811,1163,838,1166,860C1170,883,1183,917,1196,936C1214,962,1220,985,1220,1023L1220,1076L1308,1093C1356,1103,1402,1115,1410,1120C1418,1126,1439,1130,1456,1130C1485,1130,1489,1126,1499,1086Z" fill="darkorange"/>
</g>
</svg>
Your SVG is in a state that can be developed easily into what you need. The following image shows what actually has been outlined:
As you can see, the path goes around each side of the lines. That is why a change of fill only changes the black lines: what visually seems to be a line is actually a long and small enclosed area.
You can use that state to your advantage. This is done best with a visual SVG editor of some sort - Inkscape, Sketch or Illustrator for example.
Divide up the one path you currently have into its individual, closed parts. Editors have a "Break apart" command for that.
The outermost part now encloses the whole figure. Note there should be an "empty" space between the legs. Select the outermost path and the one surrounding that space and combine them back together (actually the reverse action to the previous one).
Move this object behind all other paths that are part of the figure and fill it with black.
Each other of the remaining paths can now be filled with colors of your liking. since they are sitting in front of the black background part. The only black that remains visible is in the gaps and on the outside - as if it was lines.

Excel INDEX MATCH column format into row-column format

I have a huge dataset with ID, MEAN, and DATE (in day of the year). I'm sub-setting it below just for example:
OBJECTID MEAN DATE
1 0.960337524 27
2 1.024530873 27
3 1.07565201 27
4 1.32608937 27
5 1.115863256 27
6 0.738648832 27
7 1.209547088 27
8 1.190287749 27
1 1.311272704 43
2 1.421150386 43
3 1.341622942 43
4 1.343600738 43
5 1.322288454 43
6 1.057037145 43
7 1.262514248 43
8 1.148541133 43
1 1.141311572 75
2 1.12654984 75
3 1.125632558 75
4 1.128487158 75
5 1.181200445 75
6 0.820567181 75
7 0.973662794 75
8 0.903646102 75
In this example, the first date is DAY 27 (Jan 27th). I want to reformat this in Excel so DATE is the horizontal header and ID is the first vertical column like this:
OBJECTID 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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365
1
2
3
4
5
6
7
8
How do I use INDEX and MATCH to populate the cells in the blank table above with the values in the dataset? Not all dates in the table will have a value so I need it to populate it with zero like this:
OBJECTID 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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.960337524 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.311272704 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.141311572 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
2
3
4
5
6
7
8
This is what I came up with so far:
=IFERROR(INDEX($B$2:$B$2617, MATCH(0, COUNTIF($E2:E2,$B$2:$B$2617)+IF($A$2:$A$2617<>$E2, 1, 0), 0)), 0)
But it doesn't account for the dates with no values. It put the MEAN value for Day 27 into the cell for Day 1.
OBJECTID MEAN DATE OBJECTID 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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365
1 0.960337524 27 1 0.960337524
2 1.024530873 27 2
3 1.07565201 27 3
4 1.32608937 27 4
5 1.115863256 27 5
6 0.738648832 27 6
7 1.209547088 27 7
8 1.190287749 27 8
1 1.311272704 43
2 1.421150386 43
3 1.341622942 43
4 1.343600738 43
5 1.322288454 43
6 1.057037145 43
7 1.262514248 43
8 1.148541133 43
1 1.141311572 75
2 1.12654984 75
3 1.125632558 75
4 1.128487158 75
5 1.181200445 75
6 0.820567181 75
7 0.973662794 75
8 0.903646102 75
Any advice or push in the right direction would be appreciated!
On condition that there is only one Mean in your data for each combination of ID and Date the formula below will do the job. (Input is the sheet with your data in it.)
=SUMIFS(Input!$B$2:$B$2617,Input!$A$2:$A$2617,$A2,Input!$C$2:$C$2617,B$1)
However, this formula makes the range management too error prone. Luckily most errors in the range setting will result in a formula error but the process can be much simplified by separating range management from data extraction.
I assigned the name Data to the range Input!$A$2:$C$2617. In fact, you would probably construct this range to be dynamic so that it adjusts to the number of data rows you have automatically. But that is an extra benefit of properly managing ranges which is outside the scope of your present question.
Use the range Data in the above formula you arrive at this:-
=SUMIFS(INDEX(Data,,2),INDEX(Data,,1),$A2,INDEX(Data,,3),B$1)
Either this formula or the one first above introduced can be copied to the right and down to cover your entire output table. If they bother you (as they did me) you can suppress the display of zeros in the sheet or in each cell, using the sheet settings or the cell format to do so.
What you can do is create another unique ID using simple "&" (concat) function. Basically add a 4th column which has the formula
=A2&"_"&C2
The above takes the assumption that your first entry is in 2nd row and this formula is for 2nd row as well which you can drag. Once done then you can apply index match on this new ID.
Hope it helps in clearing your query.

How to move whole SVG elemetn when it contains another SVG element

I have an image which is displayed in path attribute in svg with viewbox ( in the code below )
<svg class="map" height="50000" width="50000">
<svg class="may" height="300" width="300" preserveAspectRatio="none" viewBox="0 0 17275 8599">
<g>
<path d="M12620 8613 c-583 -56 -1102 -244 -1506 -543 -116 -86 -297 -260 -388 -373 l-68 -85 -171 83 c-358 173 -657 271 -1097 359 -492 99 -847 129 -1515 129 -435 0 -568 -7 -875 -44 -810 -97 -1468 -299 -1885 -578 -66 -44 -149 -104 -184 -134 l-65 -53 -135 44 c-562 181 -1401 248 -2112 166 -610 -69 -1147 -238 -1482 -466 -51 -34 -133 -103 -183 -153 -135 -135 -193 -242 -214 -397 -29 -207 75 -411 304 -597 124 -100 246 -168 505 -280 96 -42 176 -81 178 -86 2 -6 -24 -16 -56 -23 -139 -29 -508 -167 -726 -271 -241 -116 -390 -215 -526 -350 -135 -135 -201 -254 -218 -391 -16 -126 -13 -178 14 -254 66 -189 215 -359 452 -515 l101 -68 -160 -159 c-297 -296 -450 -537 -527 -831 -117 -447 -26 -873 269 -1268 257 -344 655 -633 1155 -838 766 -314 1794 -380 2662 -172 293 71 538 161 821 305 295 149 434 251 688 504 88 89 183 193 210 232 l50 72 12 -42 c52 -194 136 -337 296 -504 242 -251 557 -450 976 -615 397 -157 876 -275 1429 -352 297 -41 898 -55 1493 -34 242 8 343 16 499 39 568 84 1001 193 1414 357 511 202 820 418 1082 753 88 113 160 279 183 425 7 42 8 108 4 168 l-7 97 162 0 c326 0 727 29 975 72 153 26 436 97 596 149 426 141 737 342 897 582 68 102 86 168 86 312 0 106 -3 128 -26 188 -35 89 -62 127 -201 280 -64 71 -116 132 -116 135 0 4 87 36 193 71 804 266 1258 636 1383 1130 48 186 22 354 -86 571 -110 220 -274 387 -549 559 -295 184 -610 313 -1027 421 -205 53 -239 64 -248 79 -3 5 8 63 26 128 30 112 32 127 32 303 1 272 -27 390 -145 620 -242 471 -766 845 -1447 1035 -286 79 -499 107 -862 110 -162 1 -315 1 -340 -2z m565 -208 c50 -8 138 -19 196 -25 59 -6 149 -21 200 -35 52 -14 144 -39 204 -55 181 -48 301 -93 369 -139 22 -15 108 -56 191 -90 129 -54 161 -72 240 -135 49 -41 103 -86 118 -100 15 -14 32 -26 37 -26 20 0 213 -206 237 -255 9 -16 37 -57 62 -90 26 -33 59 -80 73 -105 30 -51 91 -207 103 -260 4 -19 18 -69 31 -110 17 -54 24 -98 24 -158 0 -101 -16 -218 -36 -254 -8 -14 -12 -33 -9 -40 6 -15 -15 -127 -30 -160 -5 -14 -2 -18 15 -18 12 0 54 -11 93 -25 78 -27 201 -56 257 -61 89 -8 353 -99 462 -159 14 -8 32 -15 38 -15 7 0 59 -22 116 -50 57 -27 112 -50 122 -50 25 0 286 -171 383 -252 26 -21 52 -38 58 -38 6 0 11 -4 11 -8 0 -5 12 -21 28 -38 15 -16 34 -42 42 -57 8 -16 27 -35 42 -43 30 -15 95 -97 123 -154 9 -19 28 -46 41 -60 12 -14 30 -42 38 -62 20 -48 33 -178 18 -178 -8 0 -10 -41 -5 -142 6 -141 5 -144 -21 -195 -14 -29 -26 -59 -26 -67 0 -9 -9 -32 -21 -53 -69 -126 -106 -174 -226 -298 -73 -74 -133 -139 -133 -144 0 -8 -44 -32 -98 -52 -19 -7 -38 -22 -43 -36 -5 -13 -17 -23 -28 -23 -11 0 -25 -9 -31 -20 -6 -11 -19 -20 -29 -20 -10 0 -24 -7 -31 -15 -13 -16 -148 -89 -220 -119 -25 -11 -67 -34 -95 -52 -30 -20 -82 -42 -130 -53 -112 -28 -175 -51 -286 -105 -53 -25 -105 -46 -115 -46 -10 0 -25 -4 -32 -9 -17 -10 92 -95 198 -155 9 -5 31 -35 48 -68 18 -32 48 -73 66 -91 32 -33 33 -35 38 -142 8 -145 -3 -179 -126 -394 -23 -40 -38 -54 -72 -67 -24 -9 -51 -27 -59 -41 -9 -13 -42 -41 -73 -61 -31 -20 -73 -49 -92 -64 -36 -27 -224 -118 -245 -118 -4 0 -48 -17 -98 -39 -127 -53 -358 -127 -441 -141 -38 -6 -84 -17 -102 -25 -18 -7 -90 -21 -161 -30 -70 -9 -182 -26 -248 -37 -222 -37 -369 -49 -656 -55 l-286 -5 -1 -41 c0 -107 -21 -270 -47 -357 -24 -83 -33 -102 -75 -145 -26 -27 -60 -76 -76 -108 -15 -32 -43 -72 -61 -90 -19 -18 -57 -55 -86 -82 -56 -54 -202 -160 -241 -175 -13 -4 -46 -29 -73 -54 -51 -47 -303 -180 -443 -234 -254 -97 -467 -169 -650 -218 -74 -20 -157 -43 -185 -51 -27 -7 -96 -18 -153 -23 -56 -5 -106 -11 -110 -14 -5 -3 -91 -19 -192 -35 -102 -17 -207 -38 -234 -46 -65 -20 -385 -34 -936 -41 -346 -4 -454 -3 -579 10 -85 9 -189 16 -231 16 -43 0 -136 9 -206 19 -71 10 -160 22 -199 26 -38 4 -106 15 -150 25 -44 10 -123 24 -175 30 -52 6 -156 27 -230 46 -74 19 -187 43 -252 53 -110 18 -169 38 -183 61 -3 5 -22 10 -42 10 -43 0 -105 20 -116 37 -4 6 -44 23 -89 38 -45 15 -109 41 -142 59 -34 17 -95 45 -136 61 -90 35 -203 97 -246 135 -18 15 -47 30 -66 34 -18 3 -48 20 -66 36 -18 17 -40 30 -47 30 -8 0 -29 15 -47 33 -18 17 -51 45 -73 60 -22 15 -62 53 -90 83 -27 31 -75 80 -107 110 -41 41 -62 71 -79 116 -16 43 -31 66 -51 77 -16 10 -30 28 -34 46 -8 36 -65 155 -75 155 -4 0 -12 -13 -18 -28 -7 -15 -34 -46 -62 -68 -27 -21 -58 -54 -69 -71 -11 -18 -41 -48 -67 -65 -26 -18 -73 -58 -103 -89 -30 -30 -76 -70 -102 -87 -25 -17 -48 -35 -50 -40 -1 -4 -24 -21 -49 -37 -25 -17 -78 -51 -117 -77 -73 -49 -208 -118 -229 -118 -7 0 -16 -6 -20 -14 -12 -21 -185 -100 -293 -135 -52 -16 -171 -55 -265 -85 -167 -54 -436 -115 -625 -142 -52 -8 -141 -21 -197 -29 -67 -11 -215 -18 -442 -22 -300 -5 -345 -4 -383 10 -33 13 -74 16 -173 15 -96 -1 -143 3 -180 15 -27 8 -70 18 -95 22 -55 8 -271 58 -360 85 -36 10 -94 24 -130 30 -36 7 -77 18 -93 26 -15 8 -52 19 -82 25 -30 5 -101 32 -158 58 -56 26 -136 60 -177 76 -41 15 -80 32 -86 37 -6 4 -49 27 -95 50 -46 23 -102 57 -124 75 -63 53 -68 57 -96 73 -184 103 -210 122 -303 210 -150 142 -186 181 -186 201 0 11 -4 19 -8 19 -5 0 -14 10 -19 23 -6 13 -38 57 -71 98 -83 103 -212 367 -212 436 -1 26 -6 68 -11 93 -6 25 -14 115 -19 200 -8 144 -7 161 15 250 28 112 36 132 131 300 17 30 34 67 37 82 4 15 15 29 25 32 9 3 37 31 62 61 25 30 48 55 53 55 4 0 7 8 7 18 0 9 16 28 35 41 19 13 35 30 35 37 0 8 17 26 39 42 37 27 57 45 178 163 32 30 77 68 101 84 23 15 42 29 42 30 0 2 -29 17 -65 34 -60 28 -129 87 -272 234 -16 16 -61 61 -100 101 -40 40 -73 77 -73 82 0 5 -15 33 -34 64 -19 30 -39 75 -46 100 -6 25 -18 64 -26 88 -28 84 -6 228 45 300 11 16 29 49 40 73 12 27 42 63 77 94 32 28 83 75 114 105 30 30 69 61 85 69 45 20 63 30 147 82 86 53 243 130 271 132 9 1 17 5 17 10 0 4 4 6 9 3 5 -4 11 -2 13 3 6 18 347 145 501 186 49 13 96 30 106 39 10 9 28 16 40 16 12 0 31 5 42 10 30 17 4 36 -81 59 -40 11 -77 25 -84 30 -6 5 -28 12 -48 16 -21 4 -38 11 -38 16 0 5 -11 9 -25 9 -14 0 -25 5 -25 10 0 6 -7 10 -15 10 -8 0 -15 4 -15 8 0 4 -20 14 -45 21 -24 7 -50 20 -57 29 -7 8 -32 24 -55 34 -24 10 -55 30 -70 44 -14 13 -37 27 -50 30 -13 4 -23 10 -23 15 0 5 -13 15 -29 23 -31 16 -72 49 -102 81 -108 114 -143 168 -180 277 -29 86 -26 216 6 295 29 71 59 126 94 169 14 18 33 41 41 52 8 10 47 43 85 73 39 29 72 56 75 59 3 4 51 35 107 69 188 115 475 231 732 295 266 67 653 122 934 133 81 3 147 9 147 12 0 11 565 5 750 -7 91 -6 192 -18 225 -27 33 -9 61 -12 63 -7 4 13 101 2 134 -14 15 -8 49 -14 76 -14 30 0 97 -16 173 -40 74 -25 166 -46 229 -54 58 -8 124 -21 147 -29 41 -15 41 -15 47 9 5 17 22 32 59 48 28 14 65 38 81 55 16 16 41 33 55 36 15 3 33 15 41 25 8 11 20 20 26 20 6 0 17 7 25 16 7 8 36 27 63 41 28 14 58 31 66 38 8 6 58 29 110 50 52 21 106 45 119 54 73 48 574 205 754 236 48 8 111 24 140 35 62 24 201 50 267 50 25 0 66 6 91 14 149 46 367 59 1034 61 302 1 442 -2 500 -11 44 -7 145 -18 225 -24 80 -5 215 -17 300 -26 85 -8 205 -19 265 -23 61 -5 117 -11 125 -15 8 -3 49 -12 90 -20 41 -7 125 -26 185 -40 61 -15 139 -31 175 -36 80 -11 190 -42 250 -69 25 -11 53 -21 62 -21 9 0 38 -11 65 -24 26 -13 80 -31 118 -41 68 -16 134 -41 243 -91 29 -13 59 -24 67 -24 7 0 48 -15 89 -34 65 -30 76 -32 76 -18 0 23 193 230 245 263 22 14 47 34 55 43 8 10 37 33 65 52 27 19 86 59 130 89 44 29 85 57 91 62 19 15 219 112 244 119 14 4 48 17 75 29 88 40 257 94 355 114 209 43 366 73 453 85 135 20 654 21 772 1z"></path>
<path d="M12443 8374 c-87 -12 -244 -42 -453 -85 -98 -20 -267 -74 -355 -114 -27 -12 -61 -25 -75 -29 -25 -7 -225 -104 -244 -119 -6 -5 -47 -33 -91 -62 -44 -30 -103 -70 -130 -89 -28 -19 -57 -42 -65 -52 -8 -9 -33 -29 -55 -43 -35 -23 -68 -56 -214 -213 -27 -30 -32 -41 -23 -50 14 -14 16 -48 4 -48 -5 0 -33 12 -63 26 -95 46 -161 74 -175 74 -7 0 -37 11 -66 24 -109 50 -175 75 -243 91 -38 10 -92 28 -118 41 -27 13 -56 24 -65 24 -9 0 -37 10 -62 21 -60 27 -170 58 -250 69 -36 5 -114 21 -175 36 -60 14 -144 33 -185 40 -41 8 -82 17 -90 20 -8 4 -62 10 -120 14 -58 4 -202 17 -320 28 -118 11 -259 24 -312 27 -53 4 -112 10 -132 15 -22 5 -36 4 -38 -2 -3 -7 -44 -7 -123 1 -147 15 -605 19 -895 8 -211 -8 -362 -25 -449 -53 -25 -8 -66 -14 -91 -14 -66 0 -205 -26 -267 -50 -29 -11 -92 -27 -140 -35 -180 -31 -681 -188 -754 -236 -13 -9 -67 -33 -119 -54 -52 -21 -102 -44 -110 -50 -8 -7 -38 -24 -66 -38 -27 -14 -56 -33 -63 -41 -8 -9 -20 -16 -27 -16 -8 0 -14 -4 -14 -10 0 -5 -19 -14 -42 -20 -24 -7 -59 -26 -78 -44 -19 -18 -53 -41 -75 -51 -48 -21 -65 -40 -65 -73 0 -21 -3 -23 -25 -18 -14 4 -45 9 -70 12 -24 4 -53 15 -64 25 -12 12 -47 22 -98 29 -92 12 -123 20 -223 56 -48 17 -100 28 -145 30 -109 4 -184 14 -265 35 -208 55 -928 54 -1435 -1 -229 -24 -234 -25 -465 -72 -205 -41 -459 -121 -635 -199 -127 -57 -327 -175 -378 -223 -20 -18 -56 -46 -81 -62 -26 -16 -49 -37 -52 -47 -3 -10 -18 -33 -33 -50 -39 -45 -71 -103 -92 -167 -22 -66 -25 -195 -5 -260 21 -68 76 -171 112 -210 93 -100 150 -150 171 -150 6 0 16 -6 20 -13 4 -8 27 -24 51 -37 23 -13 42 -27 42 -31 0 -4 10 -11 23 -15 12 -3 41 -19 65 -35 24 -16 47 -29 52 -29 16 0 100 -44 100 -52 0 -4 8 -8 19 -8 10 0 32 -7 47 -15 16 -8 39 -15 50 -15 12 0 27 -6 33 -14 7 -8 44 -22 83 -31 69 -15 117 -45 118 -72 0 -25 -84 -65 -194 -93 -118 -31 -222 -63 -271 -85 -16 -7 -61 -25 -100 -40 -38 -14 -91 -37 -117 -51 -25 -13 -63 -31 -85 -38 -103 -39 -190 -79 -226 -106 -23 -17 -46 -30 -51 -30 -6 0 -24 -11 -40 -25 -17 -14 -41 -28 -55 -32 -40 -9 -109 -61 -134 -98 -12 -18 -33 -40 -47 -48 -39 -24 -130 -113 -130 -128 0 -7 -15 -38 -34 -69 -48 -78 -72 -169 -59 -223 28 -110 52 -176 81 -221 18 -28 32 -54 32 -60 0 -5 33 -42 73 -82 39 -40 84 -85 99 -101 134 -137 213 -205 281 -238 41 -19 79 -35 86 -35 6 0 11 -8 11 -17 -1 -11 -29 -36 -71 -63 -39 -24 -88 -65 -110 -92 -22 -26 -49 -50 -60 -53 -10 -4 -26 -22 -34 -41 -8 -19 -20 -34 -28 -34 -21 0 -97 -58 -97 -75 0 -8 -9 -19 -20 -25 -11 -6 -20 -18 -20 -27 0 -18 -142 -163 -160 -163 -5 0 -12 -11 -16 -26 -8 -30 -89 -192 -108 -214 -40 -46 -79 -209 -75 -315 1 -44 1 -101 0 -127 -1 -26 5 -64 14 -84 8 -21 15 -66 15 -106 0 -66 4 -77 76 -226 47 -97 97 -182 129 -222 29 -36 61 -78 71 -95 10 -16 24 -34 31 -38 7 -4 13 -17 13 -27 0 -21 20 -43 176 -190 93 -88 119 -107 303 -210 28 -16 33 -20 96 -73 22 -18 78 -52 124 -75 46 -23 89 -46 95 -50 6 -5 45 -22 86 -37 41 -16 121 -50 177 -76 57 -26 128 -53 158 -58 30 -6 67 -17 82 -25 16 -8 57 -19 93 -26 36 -6 94 -20 130 -30 94 -28 307 -78 365 -86 28 -4 67 -13 89 -20 25 -9 86 -14 176 -14 105 0 147 -4 176 -16 35 -15 75 -16 354 -11 199 4 352 12 415 22 55 8 143 21 195 29 187 27 457 88 601 136 80 27 174 56 208 65 34 9 110 34 167 56 79 31 107 47 114 63 6 17 27 29 82 46 88 28 169 68 262 129 38 25 90 59 115 76 25 16 48 33 49 37 2 5 25 23 50 40 26 17 72 57 102 87 30 31 76 71 103 88 26 18 56 47 66 64 11 17 41 49 67 71 27 22 61 62 77 89 22 39 33 50 50 47 14 -2 23 -12 28 -33 3 -16 17 -52 31 -80 14 -27 28 -63 32 -80 4 -18 18 -36 34 -46 19 -11 35 -34 50 -75 16 -42 40 -76 82 -119 32 -33 87 -89 123 -125 35 -36 89 -81 121 -100 32 -19 73 -45 92 -57 19 -13 46 -26 60 -29 14 -4 48 -28 77 -54 57 -52 160 -112 252 -149 33 -13 101 -43 151 -68 50 -24 115 -51 143 -59 28 -8 74 -20 102 -28 27 -8 61 -22 74 -30 13 -9 33 -16 45 -16 11 0 29 -9 40 -20 13 -13 33 -20 59 -20 22 0 41 -5 43 -10 2 -6 44 -17 93 -25 50 -8 151 -30 225 -49 74 -19 178 -40 230 -46 52 -6 131 -20 175 -30 44 -10 112 -21 150 -25 39 -4 128 -16 199 -26 70 -10 163 -19 206 -19 42 0 146 -7 231 -16 126 -13 227 -14 549 -9 546 8 845 21 906 40 27 8 132 29 234 46 101 16 187 32 192 35 4 3 54 9 110 14 57 5 126 16 153 23 28 8 111 31 185 51 183 49 396 121 650 218 140 54 392 187 443 234 27 25 60 50 73 54 39 15 185 121 241 175 29 27 67 64 86 82 18 18 46 58 61 90 16 32 50 81 76 108 41 43 52 63 74 140 31 102 56 367 37 373 -6 2 -11 10 -11 17 0 10 61 14 298 18 297 6 442 18 667 55 66 11 178 28 248 37 71 9 143 23 161 30 18 8 64 19 102 25 83 14 314 88 441 141 50 22 94 39 98 39 21 0 209 91 245 118 19 15 61 44 92 64 31 20 64 48 73 62 9 14 32 30 51 36 24 8 36 19 40 38 12 55 16 62 55 92 31 26 39 38 39 65 0 23 10 46 35 75 33 39 35 47 35 110 0 62 -4 77 -44 152 -71 135 -89 164 -106 174 -57 32 -91 56 -158 109 -41 33 -83 64 -93 70 -32 17 -22 35 19 35 20 0 50 7 66 15 15 8 37 15 47 15 10 0 53 17 96 39 81 40 162 68 273 96 36 8 88 30 115 49 28 18 70 41 95 52 72 30 207 103 220 119 7 8 20 15 30 15 10 0 25 11 34 25 9 14 21 25 28 25 6 0 21 11 33 24 13 14 41 30 63 36 23 6 53 24 69 42 15 17 82 87 148 155 67 69 136 151 157 186 61 105 78 137 78 153 0 8 12 38 26 67 l27 52 -12 210 c-11 182 -15 213 -32 235 -11 14 -27 38 -37 54 -50 86 -102 154 -133 174 -19 13 -41 36 -50 52 -18 33 -75 100 -85 100 -3 0 -27 17 -53 38 -97 81 -358 252 -383 252 -10 0 -65 23 -122 50 -57 28 -109 50 -116 50 -6 0 -24 7 -38 15 -70 38 -184 79 -266 96 -50 10 -125 30 -166 44 -41 14 -106 33 -145 41 -38 8 -102 26 -142 39 -39 14 -83 25 -98 25 -25 0 -26 2 -19 38 4 20 11 46 16 56 6 10 14 53 18 95 4 42 15 101 24 131 9 30 19 93 22 140 6 75 3 96 -19 170 -15 47 -29 99 -33 115 -12 51 -74 208 -102 255 -14 25 -47 72 -73 105 -25 33 -53 74 -62 90 -26 52 -217 255 -239 255 -6 0 -16 6 -22 13 -14 18 -171 147 -211 174 -16 11 -93 47 -170 78 -77 32 -159 71 -181 86 -68 46 -188 91 -369 139 -60 16 -152 41 -204 55 -51 14 -141 29 -200 35 -58 6 -146 17 -196 25 -117 19 -579 19 -712 -1z" style="fill:#b3b3b3"></path>
</g>
</svg>
</svg>
But when I tried to move the image using transform and translate, It moved but it is not shown because of my viewbox
Is there any way so that i can move my path so it can be displayed?
Thanks
> https://jsfiddle.net/namkhoai16/cyn502hz/1/
As I've commented. This is what you can do:
1.transform .may in a symbol and remove the width and the height attributes.
2.give may an id. For example id="may" you will use the id to reference the symbol
3.use the symbol something like this: <use xlink:href="#may" height="300" width="300" />
Now you can apply the transformation to the use element.
<use xlink:href="#may" height="300" width="300" transform="translate(300,100)" />
<svg class="map" height="50000" width="50000">
<symbol id="may" preserveAspectRatio="none" viewBox="0 0 17275 8599" >
<g>
<path d="M12443 8374 c-87 -12 -244 -42 -453 -85 -98 -20 -267 -74 -355 -114 -27 -12 -61 -25 -75 -29 -25 -7 -225 -104 -244 -119 -6 -5 -47 -33 -91 -62 -44 -30 -103 -70 -130 -89 -28 -19 -57 -42 -65 -52 -8 -9 -33 -29 -55 -43 -35 -23 -68 -56 -214 -213 -27 -30 -32 -41 -23 -50 14 -14 16 -48 4 -48 -5 0 -33 12 -63 26 -95 46 -161 74 -175 74 -7 0 -37 11 -66 24 -109 50 -175 75 -243 91 -38 10 -92 28 -118 41 -27 13 -56 24 -65 24 -9 0 -37 10 -62 21 -60 27 -170 58 -250 69 -36 5 -114 21 -175 36 -60 14 -144 33 -185 40 -41 8 -82 17 -90 20 -8 4 -62 10 -120 14 -58 4 -202 17 -320 28 -118 11 -259 24 -312 27 -53 4 -112 10 -132 15 -22 5 -36 4 -38 -2 -3 -7 -44 -7 -123 1 -147 15 -605 19 -895 8 -211 -8 -362 -25 -449 -53 -25 -8 -66 -14 -91 -14 -66 0 -205 -26 -267 -50 -29 -11 -92 -27 -140 -35 -180 -31 -681 -188 -754 -236 -13 -9 -67 -33 -119 -54 -52 -21 -102 -44 -110 -50 -8 -7 -38 -24 -66 -38 -27 -14 -56 -33 -63 -41 -8 -9 -20 -16 -27 -16 -8 0 -14 -4 -14 -10 0 -5 -19 -14 -42 -20 -24 -7 -59 -26 -78 -44 -19 -18 -53 -41 -75 -51 -48 -21 -65 -40 -65 -73 0 -21 -3 -23 -25 -18 -14 4 -45 9 -70 12 -24 4 -53 15 -64 25 -12 12 -47 22 -98 29 -92 12 -123 20 -223 56 -48 17 -100 28 -145 30 -109 4 -184 14 -265 35 -208 55 -928 54 -1435 -1 -229 -24 -234 -25 -465 -72 -205 -41 -459 -121 -635 -199 -127 -57 -327 -175 -378 -223 -20 -18 -56 -46 -81 -62 -26 -16 -49 -37 -52 -47 -3 -10 -18 -33 -33 -50 -39 -45 -71 -103 -92 -167 -22 -66 -25 -195 -5 -260 21 -68 76 -171 112 -210 93 -100 150 -150 171 -150 6 0 16 -6 20 -13 4 -8 27 -24 51 -37 23 -13 42 -27 42 -31 0 -4 10 -11 23 -15 12 -3 41 -19 65 -35 24 -16 47 -29 52 -29 16 0 100 -44 100 -52 0 -4 8 -8 19 -8 10 0 32 -7 47 -15 16 -8 39 -15 50 -15 12 0 27 -6 33 -14 7 -8 44 -22 83 -31 69 -15 117 -45 118 -72 0 -25 -84 -65 -194 -93 -118 -31 -222 -63 -271 -85 -16 -7 -61 -25 -100 -40 -38 -14 -91 -37 -117 -51 -25 -13 -63 -31 -85 -38 -103 -39 -190 -79 -226 -106 -23 -17 -46 -30 -51 -30 -6 0 -24 -11 -40 -25 -17 -14 -41 -28 -55 -32 -40 -9 -109 -61 -134 -98 -12 -18 -33 -40 -47 -48 -39 -24 -130 -113 -130 -128 0 -7 -15 -38 -34 -69 -48 -78 -72 -169 -59 -223 28 -110 52 -176 81 -221 18 -28 32 -54 32 -60 0 -5 33 -42 73 -82 39 -40 84 -85 99 -101 134 -137 213 -205 281 -238 41 -19 79 -35 86 -35 6 0 11 -8 11 -17 -1 -11 -29 -36 -71 -63 -39 -24 -88 -65 -110 -92 -22 -26 -49 -50 -60 -53 -10 -4 -26 -22 -34 -41 -8 -19 -20 -34 -28 -34 -21 0 -97 -58 -97 -75 0 -8 -9 -19 -20 -25 -11 -6 -20 -18 -20 -27 0 -18 -142 -163 -160 -163 -5 0 -12 -11 -16 -26 -8 -30 -89 -192 -108 -214 -40 -46 -79 -209 -75 -315 1 -44 1 -101 0 -127 -1 -26 5 -64 14 -84 8 -21 15 -66 15 -106 0 -66 4 -77 76 -226 47 -97 97 -182 129 -222 29 -36 61 -78 71 -95 10 -16 24 -34 31 -38 7 -4 13 -17 13 -27 0 -21 20 -43 176 -190 93 -88 119 -107 303 -210 28 -16 33 -20 96 -73 22 -18 78 -52 124 -75 46 -23 89 -46 95 -50 6 -5 45 -22 86 -37 41 -16 121 -50 177 -76 57 -26 128 -53 158 -58 30 -6 67 -17 82 -25 16 -8 57 -19 93 -26 36 -6 94 -20 130 -30 94 -28 307 -78 365 -86 28 -4 67 -13 89 -20 25 -9 86 -14 176 -14 105 0 147 -4 176 -16 35 -15 75 -16 354 -11 199 4 352 12 415 22 55 8 143 21 195 29 187 27 457 88 601 136 80 27 174 56 208 65 34 9 110 34 167 56 79 31 107 47 114 63 6 17 27 29 82 46 88 28 169 68 262 129 38 25 90 59 115 76 25 16 48 33 49 37 2 5 25 23 50 40 26 17 72 57 102 87 30 31 76 71 103 88 26 18 56 47 66 64 11 17 41 49 67 71 27 22 61 62 77 89 22 39 33 50 50 47 14 -2 23 -12 28 -33 3 -16 17 -52 31 -80 14 -27 28 -63 32 -80 4 -18 18 -36 34 -46 19 -11 35 -34 50 -75 16 -42 40 -76 82 -119 32 -33 87 -89 123 -125 35 -36 89 -81 121 -100 32 -19 73 -45 92 -57 19 -13 46 -26 60 -29 14 -4 48 -28 77 -54 57 -52 160 -112 252 -149 33 -13 101 -43 151 -68 50 -24 115 -51 143 -59 28 -8 74 -20 102 -28 27 -8 61 -22 74 -30 13 -9 33 -16 45 -16 11 0 29 -9 40 -20 13 -13 33 -20 59 -20 22 0 41 -5 43 -10 2 -6 44 -17 93 -25 50 -8 151 -30 225 -49 74 -19 178 -40 230 -46 52 -6 131 -20 175 -30 44 -10 112 -21 150 -25 39 -4 128 -16 199 -26 70 -10 163 -19 206 -19 42 0 146 -7 231 -16 126 -13 227 -14 549 -9 546 8 845 21 906 40 27 8 132 29 234 46 101 16 187 32 192 35 4 3 54 9 110 14 57 5 126 16 153 23 28 8 111 31 185 51 183 49 396 121 650 218 140 54 392 187 443 234 27 25 60 50 73 54 39 15 185 121 241 175 29 27 67 64 86 82 18 18 46 58 61 90 16 32 50 81 76 108 41 43 52 63 74 140 31 102 56 367 37 373 -6 2 -11 10 -11 17 0 10 61 14 298 18 297 6 442 18 667 55 66 11 178 28 248 37 71 9 143 23 161 30 18 8 64 19 102 25 83 14 314 88 441 141 50 22 94 39 98 39 21 0 209 91 245 118 19 15 61 44 92 64 31 20 64 48 73 62 9 14 32 30 51 36 24 8 36 19 40 38 12 55 16 62 55 92 31 26 39 38 39 65 0 23 10 46 35 75 33 39 35 47 35 110 0 62 -4 77 -44 152 -71 135 -89 164 -106 174 -57 32 -91 56 -158 109 -41 33 -83 64 -93 70 -32 17 -22 35 19 35 20 0 50 7 66 15 15 8 37 15 47 15 10 0 53 17 96 39 81 40 162 68 273 96 36 8 88 30 115 49 28 18 70 41 95 52 72 30 207 103 220 119 7 8 20 15 30 15 10 0 25 11 34 25 9 14 21 25 28 25 6 0 21 11 33 24 13 14 41 30 63 36 23 6 53 24 69 42 15 17 82 87 148 155 67 69 136 151 157 186 61 105 78 137 78 153 0 8 12 38 26 67 l27 52 -12 210 c-11 182 -15 213 -32 235 -11 14 -27 38 -37 54 -50 86 -102 154 -133 174 -19 13 -41 36 -50 52 -18 33 -75 100 -85 100 -3 0 -27 17 -53 38 -97 81 -358 252 -383 252 -10 0 -65 23 -122 50 -57 28 -109 50 -116 50 -6 0 -24 7 -38 15 -70 38 -184 79 -266 96 -50 10 -125 30 -166 44 -41 14 -106 33 -145 41 -38 8 -102 26 -142 39 -39 14 -83 25 -98 25 -25 0 -26 2 -19 38 4 20 11 46 16 56 6 10 14 53 18 95 4 42 15 101 24 131 9 30 19 93 22 140 6 75 3 96 -19 170 -15 47 -29 99 -33 115 -12 51 -74 208 -102 255 -14 25 -47 72 -73 105 -25 33 -53 74 -62 90 -26 52 -217 255 -239 255 -6 0 -16 6 -22 13 -14 18 -171 147 -211 174 -16 11 -93 47 -170 78 -77 32 -159 71 -181 86 -68 46 -188 91 -369 139 -60 16 -152 41 -204 55 -51 14 -141 29 -200 35 -58 6 -146 17 -196 25 -117 19 -579 19 -712 -1z"></path>
</g>
</symbol>
<use xlink:href="#may" height="300" width="300" transform="translate(300,100)" />
</svg>
Observation: I've removed one of the 2 paths to simplify a little the code.

SVG Image Constraints

I'm trying to make it so that when you hover over an image, the highlighted region stays within the image boundaries. Right now, the whole block just highlights, with the code for that below:
HTML
<body>
<div id="maincontent">
<div class="col">
<img class="lightbulb" src="http://bit.ly/1FgI5wE">
</div>
</div>
</body>
CSS
.lightbulb:hover {
background-color: yellow;
}
I understand why this isn't what I want, so I went searching for a solution. The best one I found was at Hover effects on irregular polygons in CSS, but I'm running into problems as I'm trying to implement it. I tried replacing one of the country's paths with my image's path, but for some reason it's not showing up.
Please help me figure this out, or suggest a better solution! Thanks.
The file for my SVG image is below:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="203.000000pt" height="275.000000pt" viewBox="0 0 203.000000 275.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,275.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M770 2676 c-214 -57 -255 -76 -359 -165 -55 -47 -173 -215 -230 -329
-84 -167 -115 -326 -92 -480 24 -165 64 -292 132 -416 56 -101 121 -184 244
-311 68 -70 95 -107 132 -181 25 -51 49 -115 53 -141 7 -44 5 -51 -21 -81 -45
-51 -35 -104 23 -125 16 -6 15 -9 -7 -31 -34 -34 -33 -78 1 -105 l26 -20 -21
-27 c-59 -75 14 -126 179 -125 75 0 75 0 91 -32 19 -39 67 -59 124 -51 55 8
85 29 85 59 0 23 4 25 43 25 52 0 170 9 215 16 18 3 42 14 53 25 23 23 25 76
4 106 -14 21 -14 24 4 42 11 11 23 31 27 45 6 27 -17 80 -42 94 -15 8 -15 11
5 31 26 26 27 71 4 99 -22 24 -100 42 -188 42 l-63 0 -18 45 c-21 56 -16 198
11 293 16 55 22 65 51 77 37 15 111 87 134 129 16 32 5 59 -27 64 -26 4 -85
-62 -120 -133 -27 -55 -47 -67 -71 -43 -8 8 -7 17 7 37 49 70 52 145 5 157
-41 11 -79 -33 -76 -90 1 -24 6 -55 11 -68 17 -46 -23 -62 -80 -32 -27 14 -29
17 -17 32 23 28 38 71 38 110 0 64 -42 83 -79 36 -25 -32 -28 -96 -7 -136 14
-26 13 -29 -5 -38 -25 -14 -35 -7 -42 30 -8 40 -51 106 -83 126 -24 16 -27 16
-52 -3 -36 -27 -40 -69 -10 -113 30 -45 87 -83 115 -77 26 5 28 1 42 -105 11
-79 9 -119 -11 -223 -17 -92 -15 -90 -109 -94 -46 -1 -91 -7 -101 -12 -16 -9
-22 1 -18 34 0 1 -9 29 -20 61 -35 103 -88 187 -170 271 -191 194 -305 377
-346 550 -46 196 -52 275 -30 395 26 147 76 259 202 451 83 125 204 216 339
254 28 7 82 23 121 34 78 22 222 39 299 34 85 -5 226 -44 325 -90 52 -25 111
-52 130 -61 43 -20 160 -138 210 -212 54 -80 84 -151 126 -301 34 -125 37
-144 37 -274 1 -119 -3 -156 -26 -247 -38 -155 -76 -222 -229 -404 -95 -115
-145 -187 -204 -299 -44 -82 -69 -161 -53 -170 5 -3 11 7 15 22 22 100 111
252 251 426 123 154 172 225 200 292 18 44 28 80 63 238 23 106 4 286 -49 465
-54 181 -94 251 -217 379 -72 75 -89 87 -199 138 -66 32 -165 70 -220 86 -86
25 -116 29 -220 28 -103 0 -137 -5 -245 -33z m248 -1444 c4 -26 -26 -122 -38
-122 -20 0 -26 86 -8 125 14 31 42 29 46 -3z m160 -12 c1 -14 -9 -47 -22 -75
l-24 -50 -11 28 c-23 60 -6 130 32 125 15 -2 23 -11 25 -28z m-343 -16 c22
-24 70 -132 62 -140 -11 -12 -80 22 -106 52 -62 71 -19 156 44 88z m525 16 c0
-24 -32 -70 -76 -109 -43 -37 -71 -53 -62 -33 25 55 63 114 84 131 29 23 54
27 54 11z m-361 -154 c19 -22 67 -29 98 -14 24 11 33 11 59 -3 29 -14 31 -17
19 -40 -33 -62 -45 -266 -20 -326 8 -20 14 -37 13 -38 -2 -1 -60 -5 -129 -9
l-126 -6 13 57 c23 98 26 192 10 278 -8 44 -11 81 -7 83 5 1 17 9 27 17 24 18
29 18 43 1z m416 -470 c31 -21 33 -61 4 -93 l-22 -22 32 -33 c17 -17 31 -42
31 -55 0 -23 -32 -63 -50 -63 -5 0 -10 -7 -10 -15 0 -8 4 -15 10 -15 5 0 16
-13 25 -29 15 -31 9 -71 -14 -86 -20 -12 -185 -24 -411 -30 -186 -4 -235 -3
-285 10 -32 9 -61 18 -64 20 -2 3 -4 18 -4 35 0 20 9 38 28 54 l28 24 -36 16
c-48 19 -50 55 -7 98 34 34 33 43 -9 51 -41 9 -56 39 -37 75 24 46 39 53 143
63 288 28 601 26 648 -5z m-314 -499 c-28 -29 -120 -30 -150 -3 -40 37 -27 45
72 48 101 3 117 -6 78 -45z"/>
<path d="M941 469 c-90 -5 -166 -11 -170 -15 -8 -9 466 5 509 16 45 10 -113
10 -339 -1z"/>
<path d="M985 310 c-99 -4 -181 -8 -182 -9 -11 -5 0 -22 12 -17 8 3 119 6 245
7 150 1 230 5 227 12 -4 14 -87 15 -302 7z"/>
</g>
</svg>
If you only want part of your SVG image to change colour, then you can't just change the background colour of the whole image and expect it to figure out which parts to apply this colour to.
I suggest you keep things simple to start with. Get rid of the <img> element and put the SVG data directly inside your HTML file. Then you can use CSS rules to modify the appearance of individual SVG elements.
Here's a basic example to get you started:
#bulb #glow { fill:#999; }
#bulb:hover #glow { fill:#fd0; }
<svg id="bulb" width="100" height="100" viewBox="0 0 100 100">
<circle id="glow" cx="50" cy="40" r="37" fill="#999" />
<path d="M33 33 45 75ZM55 75 68 32Z"
stroke="#000" stroke-width="3" stroke-opacity="0.5"/>
<rect x="30" y="71" width="40" height="29" fill="#e70"/>
</svg>

going from svg to Raphael

I have an svg file that I'm trying to get to render in Raphael. The problem is in the transformation. I can't get the paths to scale and transform. Can anyone tell me please what I'm doing wrong?
Here's my original code in svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="1000.000000pt" height="618.000000pt" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify" onload="javascript: init(evt);">
<g transform="translate(0.000000,309.000000) scale(0.100000,-0.100000)" fill="#cc6633" stroke="none">
<path d="M410 1078 c0 -20 -8 -32 -27 -42 -16 -9 -54 -39 -86 -68 l-58 -53 67 -75 c67 -76 78 -83 217 -140 58 -24 77 -37 77 -51 0 -11 -7 -19 -17 -19 -15 0 -16 -2 -3 -10 21 -13 53 -12 73 3 19 13 46 110 47 165 0 17 5 32 11 32 27 0 50 44 47 89 -3 39 -7 48 -30 59 -38 18 -35 39 9 80 30 27 35 35 22 42 -8 5 -90 10 -182 12 l-167 3 0 -27z" id="Allegheny" label="Allegheny" >
</path>
</g>
</svg>
And here's my Raphael code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Raphaƫl </title>
<style>
#canvas {
}
#paper {
}
#Allegheny {
}
</style>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var R = Raphael("paper", 1000, 800);
var attr = {
fill: "#ccc",
stroke: "#333",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var pa = {};
pa.Allegheny = R.path("M410 1078 c0 -20 -8 -32 -27 -42 -16 -9 -54 -39 -86 -68 l-58 -53 67 -75 c67 -76 78 -83 217 -140 58 -24 77 -37 77 -51 0 -11 -7 -19 -17 -19 -15 0 -16 -2 -3 -10 21 -13 53 -12 73 3 19 13 46 110 47 165 0 17 5 32 11 32 27 0 50 44 47 89 -3 39 -7 48 -30 59 -38 18 -35 39 9 80 30 27 35 35 22 42 -8 5 -90 10 -182 12 l-167 3 0 -27z").attr(attr);
R.setViewBox(0, 0, 1024, 768, false);
R.transform(T0,309);
R.transform(s0.1);
};
</script>
</head>
<body>
<div id="canvas">
<div id="paper"></div>
<div id="Allegheny"></div>
</div>
</body>
</html>
You can see http://blogs.sites.post-gazette.com/demo/index.html
Several things:
Put quotes around the argument to transform().
You can include all the transformations in one call (see API).
You probably want to transform pa.Allegheny, not R
So:
pa.Allegheny.transform("T0,309s0.1");

Resources