Filling in the enclosed space of an SVG? - 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.
Related
Missing values in .dat file(empty) leading to error while reading the file
I have a .dat file which I tried to do analysis upon. This is the code
catalog=ascii.read("table6.dat",Reader=ascii.NoHeader,guess=False,fast_reader=False,delimiter='\s')
The problem is that there are missing values(empty) within the file which does not allow me to do analysis on the data.
output:
astropy.io.ascii.core.InconsistentTableError: Number of header columns (23) inconsistent with data columns (24) at data line 3
changing the delimiter from '\s' to '\n' gives me this
col1
-------------------------------------------------------------------------------------------------------------------------------------
1 33 Psc 28 00 05 20.1 -05 42 27 93.73 -65.93 111 -6.6 -13 89 (44) -3 45 -101 -16.7 37.4 24.6
2 ADS 48A 38 00 05 41.2 45 48 35 114.64 -16.32 11 -9.0 886 -207 (737) -4 10 -3 -33.6 -31.1 -15.4
3 5 Cet 352 00 08 12.0 -02 26 52 98.32 -63.23 140 -0.4 6 -4 (77) -9 62 -125 -2.1 -4.1 -1.4
4 BD Cet 1833 00 22 46.7 -09 13 49 100.84 -70.86 71 -4.8 3 -51 (409) -4 23 -67 8.1 -15.9 -0.9
5 13 Cet A 3196 00 35 14.8 -03 35 34 112.87 -66.15 21 10.6 410 -21 (409) -3 8 -19 -36.0 -19.3 -12.7
6 FF And 00 42 47.3 35 32 50 120.95 -27.29 24 -0.5 250 90 (380) -11 18 -11 -26.3 -11.6 8.6
7 zeta And 4502 00 47 20.3 24 16 02 121.73 -38.60 31 -23.7 -100 -83 (737) -13 21 -19 26.5 -14.0 5.2
8 CF Tuc 5303 00 52 58.3 -74 39 07 302.81 -42.48 54 0.5 19 28 (409) 22 -33 -36 -6.6 1.0 -5.5
9 BD+25 161 6286 01 04 07.1 26 35 13 126.44 -36.20 55 -20.0 -12 -18 (737) -26 36 -32 13.7 -13.5 7.7
10 AY Cet 7672 01 16 36.2 -02 30 01 137.72 -64.65 67 -30.1 -108 -59 (409) -21 19 -60 46.6 -2.7 15.6
...
196 IM Peg 216489 22 53 02.3 16 50 28 86.36 -37.48 50 -12.8 -19 -24 (737) 3 40 -30 6.3 -11.9 6.0
197 AZ Psc 217188 22 58 52.7 00 18 58 73.71 -51.46 260 -20.5 39 16 (409) 45 156 -203 -54.2 -12.3 5.5
198 TZ PsA 217344 23 00 27.7 -33 44 34 10.64 -65.25 46 36.9 -44 -132 (409) 19 4 -42 32.1 -21.4 -28.2
199 KU Peg 218153 23 05 29.3 26 00 33 95.03 -31.05 950 -80.4 51 -9 (737) -71 811 -490 -171.4 -159.1 -78.5
200 KZ And 218738 23 09 57.4 47 57 30 105.90 -11.53 23 -6.9 157 -5 (737) -6 22 -5 -12.7 -12.2 -5.5
201 RT And 23 11 10.0 53 01 33 108.06 -6.92 95 20.0 -12 -18 (737) -29 90 -11 1.5 20.8 -7.9
202 SZ Psc 219113 23 13 23.8 02 40 32 80.66 -51.96 125 12.0 12 29 (737) 13 76 -98 -13.5 17.2 -3.5
203 EZ Peg 23 16 53.4 25 43 09 97.58 -32.45 83 -27.2 -70 13 (409) -9 69 -45 24.8 -10.9 28.1
204 lambda And 222107 23 37 33.9 46 27 29 109.90 -14.53 23 6.8 162 -421 (737) -8 21 -6 -1.8 -6.7 -49.2
205 KT Peg 222317 23 39 31.0 28 14 47 104.22 -32.00 25 -3.1 299 226 (737) -5 21 -13 -41.9 -6.0 13.8
206 II Peg 224085 23 55 04.0 28 38 01 108.22 -32.62 29 -18.1 574 27 (737) -8 24 -16 -66.5 -48.1 -3.8
but the header cannot be separately allocated to the columns.
there is a missing value in rows 6, 201, 203 in the third column(shown values).
the problem could be solved if false values could be given to these missing empty fields.
I can't find any documentation relating to this...
The problem is that there is fundamentally no way for the table parser to unambiguously know where the column boundaries are for your data file. Your table data are in fixed-width format, meaning that each column lives within certain character bounds in each line. You need to specify those bounds in some way. This is documented here with examples: https://docs.astropy.org/en/latest/io/ascii/fixed_width_gallery.html#fixed-width-gallery If you can modify the file, the easiest way is to add a header line which tells the parser what the column boundaries are. For example: Col1 Col2 Col3 Col4 ---- --------- ---- ---- 1.2 "hello" 1 a 2.4 's worlds 2 2 If you cannot modify the file itself, then you can explicitly specify the column starts and stops, as shown in the second example in this section: https://docs.astropy.org/en/latest/io/ascii/fixed_width_gallery.html#fixedwidthnoheader
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.
TypeError while looping through dictionary key and items
I have a dictionary and when I tried to loop through its keys and values, it throws me an error:
TypeError: items() takes no arguments (1 given)
BDT_param_grid1 ={"learning_rate": np.arange(0.1,1.0,0.1),
"n_estimators": np.arange(1, 1000, 10),
"base_estimator__min_samples_split": np.arange(0.1,1.0,0.1),
"base_estimator__min_samples_leaf": np.arange(1,60,1),
"base_estimator__max_leaf_nodes": np.arange(2,60,1),
"base_estimator__min_weight_fraction_leaf": np.arange(0.1, 0.4, 0.1),
"base_estimator__max_features": np.arange(0.1,1,0.1),
"base_estimator__max_depth": np.arange(1, 28, 1)}
for key,items in dict.items(BDT_param_grid1):
print(key,items)
My expected result is:
learning_rate [0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9]
n_estimators [ 1 11 21 31 41 51 61 71 81 91 101 111 121 131 141 151 161 171
181 191 201 211 221 231 241 251 261 271 281 291 301 311 321 331 341 351
361 371 381 391 401 411 421 431 441 451 461 471 481 491 501 511 521 531
541 551 561 571 581 591 601 611 621 631 641 651 661 671 681 691 701 711
721 731 741 751 761 771 781 791 801 811 821 831 841 851 861 871 881 891
901 911 921 931 941 951 961 971 981 991]
base_estimator__min_samples_split [0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9]
base_estimator__min_samples_leaf [ 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]
base_estimator__max_leaf_nodes [ 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]
base_estimator__min_weight_fraction_leaf [0.1 0.2 0.3 0.4]
base_estimator__max_features [0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9]
base_estimator__max_depth [ 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]
Quiet Strange as I was able to get the result without any error earlier in the same code
Resizing .svg image using 'convert' function of ImageMagick suite produces empty images
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">...
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>