问:
How to adjust space between SVG over an SVG path using CSS?
I made a rookie DIY design for a saree. I used the SVG's to place over another SVG for it. Which works fine, but need to be able to adjust the distance between replicated SVG's (both vertical and horizontal).

Here's how it looks now:

In the above picture, I was able to add an SVG(design) over another plain SVG(saree) and the replicates. But how do I manipulate the distance between them using CSS.

Here's the code in JSFiddle:

```<code><style>
.blowse-top-detailed {
    width: 500px;
    height: 300px;
    left: 40%;
    top: 5%;
    position: absolute;
}
</style>

<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 243.000000 439.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,439.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <pattern id="saree_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <svg id="saree_img" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 401.000000 254.000000" style="width: 30px;height: 30px;">
        <g xmlns="http://www.w3.org/2000/svg" transform="translate(0.000000,254.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
          <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" style="fill: rgb(255, 255, 255);"></path>
        </g>
      </svg>
    </pattern>
  </g>
</svg>
<svg class="saree-top-detailed saree detailed_indi" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 121.000000 95.000000" preserveAspectRatio="xMidYMid meet" style="display: block;">
  <g transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <rect class="path_saree" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
    <rect class="path_saree_img" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="display: block; fill: url("#saree_pattern_img");"></rect>
  </g>
</svg>
</code>```

Any help is greatly appreciated.

Body:
I made a rookie DIY design for a saree. I used the SVG's to place over another SVG for it. Which works fine, but need to be able to adjust the distance between replicated SVG's (both vertical and horizontal).

Here's how it looks now:

In the above picture, I was able to add an SVG(design) over another plain SVG(saree) and the replicates. But how do I manipulate the distance between them using CSS.

Here's the code in JSFiddle:

<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 243.000000 439.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,439.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <pattern id="saree_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <svg id="saree_img" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 401.000000 254.000000" style="width: 30px;height: 30px;">
        <g xmlns="http://www.w3.org/2000/svg" transform="translate(0.000000,254.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
          <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" style="fill: rgb(255, 255, 255);"></path>
          <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" style="fill: rgb(255, 255, 255);"></path>
        </g>
      </svg>
    </pattern>
  </g>
</svg>
<svg class="saree-top-detailed saree detailed_indi" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 121.000000 95.000000" preserveAspectRatio="xMidYMid meet" style="display: block;">
  <g transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <rect class="path_saree" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="fill: rgb(25, 36, 112);"></rect>
    <rect class="path_saree_img" x="10" y="10" width="1200px" height="500px" fill="black" stroke="black" style="display: block; fill: url("#saree_pattern_img");"></rect>
  </g>
</svg>

Any help is greatly appreciated.

Body:
In order to simplify the code I've made a few changes. I've put the lothus flower in a symbol. Inside the pattern I'm using the symbol with <use>. Since the symbol has a viewBox you can resize it as you need. In this case I'm using width="37.7" height="22.9". Please observe that I'm keeping the same aspect ratio. (symbol's viewBox="150 110 3770 2290")

Also the pattern has a  width="37.7" height="22.9". In this case I'm using the same width and height as the use element and the lothus flowers are apearing one next to each other.

<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet">
  <symbol id="saree_img" viewBox="150 110 3770 2290">

          <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z" ></path>
          <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z" ></path>
          <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z" ></path>
          <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z" ></path>
          <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z" ></path>
          <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z" ></path>
          <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z" ></path>
          <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z" ></path>
          <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z" ></path>
          <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path>
          <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path>
          <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z" ></path>
          <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z" ></path>
          <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z" ></path>
          <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path>
          <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path>
          <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z" ></path>
          <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path>
          <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path>
          <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path>
          <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path>
          <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path>
          <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path>
          <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z" ></path>
          <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z" ></path>
          <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z" ></path>
          <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z" ></path>
          <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path>
          <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z" ></path>
          <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z" ></path>
          <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z" ></path>
          <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z" ></path>
          <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z"
                ></path>
          <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z"
                ></path>
          <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z" ></path>
          <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z" ></path>
          <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z" ></path>
          <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z" ></path>

      </symbol>

    <pattern id="saree_pattern_img"  width="37.7" height="22.9" x="15" y="11" patternUnits="userSpaceOnUse" >
      <use href="#saree_img" width="37.7" height="22.9" fill="white"/>
    </pattern>

    <rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect>

  <rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect>

</svg>

In order to increase the space between the flowers you can change the width and the height of the pattern. Try for example width="50" height="50".

In the next demo you can use the sliders to change the width and the height of the pattern.

w.addEventListener("input", ()=>{saree_pattern_img.setAttribute("width",w.value)})

h.addEventListener("input", ()=>{saree_pattern_img.setAttribute("height",h.value)})

<p>width:<input type="range" id="w" min="37.7" max="200" value="50" /></p>
<p>height:<input type="range" id="h" min="22.9" max="200" value="50" /></p>

<svg class="saree-top saree" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1220 500" preserveAspectRatio="xMidYMid meet">
  <symbol id="saree_img" viewBox="150 110 3770 2290">

    <path d="M2865 2381 c-44 -10 -90 -23 -102 -29 -49 -27 -55 -80 -18 -160 37 -80 34 -113 -17 -166 -30 -30 -62 -50 -106 -66 -54 -20 -61 -25 -45 -34 26 -15 132 -10 176 8 20 9 62 39 92 66 40 36 69 53 112 65 90 25 121 42 139 76 20 40 16 62 -35 172 l-41 87 -37 -1 c-21 -1 -74 -9 -118 -18z"></path>
    <path d="M992 2351 c-18 -11 -52 -133 -52 -183 0 -49 44 -100 102 -117 24 -8 57 -18 75 -23 18 -5 66 -36 107 -69 83 -66 118 -81 156 -67 l25 10 -25 10 c-93 37 -117 59 -127 121 -4 27 2 51 27 101 l32 66 -25 54 c-31 67 -56 81 -162 89 -44 3 -89 9 -100 12 -11 3 -26 1 -33 -4z"></path>
    <path d="M3175 2136 c-35 -15 -90 -74 -112 -121 -15 -30 -14 -37 1 -75 l16 -42 -28 -26 c-49 -46 -135 -82 -246 -104 -58 -12 -106 -25 -106 -29 0 -15 150 -10 220 6 36 9 106 32 155 53 85 35 96 37 207 38 110 1 120 3 158 28 53 35 67 64 52 113 -6 21 -14 64 -18 96 -4 32 -10 60 -14 62 -5 3 -64 7 -132 10 -88 3 -132 0 -153 -9z"></path>
    <path d="M557 2123 c-4 -3 -7 -14 -7 -23 0 -9 -11 -38 -25 -64 -14 -26 -25 -58 -25 -71 0 -31 43 -81 93 -107 36 -18 51 -19 141 -13 90 6 106 4 151 -15 28 -12 91 -33 140 -46 155 -43 432 -42 438 1 1 6 -52 12 -133 16 -142 6 -206 22 -314 76 -80 40 -88 50 -80 101 6 41 4 46 -32 84 -57 59 -85 68 -222 68 -65 0 -122 -3 -125 -7z"></path>
    <path d="M1933 2102 c-56 -31 -78 -69 -78 -139 0 -72 19 -105 81 -140 72 -42 153 -22 205 50 54 74 33 180 -43 227 -41 25 -121 26 -165 2z"></path>
    <path d="M1017 1974 c-8 -8 2 -35 22 -58 31 -36 205 -96 242 -84 13 4 -114 105 -169 134 -27 14 -84 19 -95 8z"></path>
    <path d="M2930 1949 c-14 -6 -41 -25 -60 -44 -20 -19 -65 -46 -100 -61 -84 -34 -94 -44 -43 -44 47 0 220 54 246 77 10 9 17 30 17 50 0 36 -13 41 -60 22z"></path>
    <path d="M1734 1876 l-39 -33 20 -38 c28 -52 90 -112 150 -143 44 -24 61 -27 150 -27 89 0 105 3 151 27 51 27 127 102 147 146 9 20 5 28 -28 62 -22 22 -46 40 -55 40 -8 0 -26 -20 -39 -44 -13 -25 -40 -57 -61 -71 -102 -71 -216 -46 -296 65 -20 27 -41 50 -48 50 -7 0 -30 -15 -52 -34z"></path>
    <path d="M3524 1811 c-26 -12 -57 -40 -85 -77 -25 -33 -64 -69 -86 -82 -121 -67 -410 -70 -627 -6 -105 30 -50 -12 65 -50 85 -29 186 -41 404 -52 l149 -7 46 -47 c39 -40 55 -50 104 -60 32 -7 96 -10 141 -8 77 3 86 5 122 36 21 18 66 54 100 80 40 30 62 54 63 68 0 32 -175 199 -225 213 -59 16 -124 13 -171 -8z"></path>
    <path d="M1611 1784 c-27 -34 -27 -41 7 -95 54 -83 156 -160 255 -191 104 -32 246 -19 355 34 90 43 221 192 206 233 -4 8 -15 20 -25 25 -37 20 -58 11 -99 -45 -48 -65 -113 -115 -182 -140 -73 -26 -195 -18 -268 19 -59 29 -138 101 -171 154 -25 39 -51 41 -78 6z"></path>
    <path d="M365 1768 c-11 -7 -64 -45 -117 -85 -119 -90 -123 -103 -47 -163 29 -22 64 -58 80 -79 34 -47 96 -71 186 -71 97 0 152 28 198 101 l23 36 134 7 c206 11 392 46 516 97 84 35 59 55 -29 23 -256 -90 -590 -60 -656 61 -33 61 -87 85 -187 85 -45 0 -90 -6 -101 -12z"></path>
    <path d="M782 1768 c-19 -19 -15 -32 23 -71 32 -33 40 -36 93 -36 31 0 118 -3 192 -6 112 -5 147 -3 204 12 87 23 104 48 24 36 -83 -12 -258 -9 -315 5 -33 9 -60 24 -77 43 -23 25 -33 29 -79 29 -29 0 -58 -5 -65 -12z"></path>
    <path d="M3150 1736 c-41 -22 -62 -24 -239 -29 -106 -3 -195 -8 -198 -11 -6 -6 1 -9 62 -26 47 -13 396 -26 447 -16 35 6 88 46 88 65 0 9 -83 41 -104 41 -6 -1 -31 -11 -56 -24z"></path>
    <path d="M1470 1730 c-24 -24 -24 -29 -4 -58 22 -31 69 -30 90 3 15 23 15 27 0 50 -20 31 -58 33 -86 5z"></path>
    <path d="M2482 1729 c-30 -11 -39 -54 -17 -79 25 -28 61 -25 81 5 30 47 -10 94 -64 74z"></path>
    <path d="M1532 1610 c-16 -27 -15 -41 7 -67 24 -29 42 -29 69 0 28 29 28 41 0 67 -28 25 -60 26 -76 0z"></path>
    <path d="M2400 1591 c-16 -31 -12 -49 15 -67 21 -14 31 -15 50 -6 24 11 30 27 25 62 -5 34 -73 42 -90 11z"></path>
    <path d="M2647 1581 c35 -29 166 -80 270 -106 51 -13 113 -31 137 -40 49 -19 99 -15 132 10 19 15 19 15 0 30 -20 15 -53 22 -257 54 -75 12 -169 32 -209 46 -87 30 -103 31 -73 6z"></path>
    <path d="M1325 1535 c-149 -55 -227 -71 -276 -56 -38 11 -45 10 -96 -15 -47 -23 -53 -28 -41 -41 35 -34 82 -28 277 36 103 35 206 73 227 86 55 34 20 30 -91 -10z"></path>
    <path d="M1639 1521 c-20 -16 -22 -23 -14 -47 6 -18 21 -33 39 -39 24 -8 31 -6 47 14 22 27 24 41 7 63 -21 27 -53 30 -79 9z"></path>
    <path d="M2580 1525 c26 -31 190 -131 307 -187 68 -32 127 -67 133 -78 5 -10 10 -34 10 -53 0 -42 41 -87 115 -124 l49 -26 121 18 c66 10 127 21 135 26 9 4 20 36 28 76 7 37 15 80 19 95 11 56 -3 78 -75 111 -86 39 -154 42 -232 8 -44 -19 -65 -22 -110 -18 -87 10 -293 73 -396 122 -99 48 -125 55 -104 30z"></path>
    <path d="M2306 1509 c-31 -25 -33 -49 -5 -74 19 -19 21 -19 55 0 37 20 42 39 18 73 -19 27 -34 28 -68 1z"></path>
    <path d="M1403 1465 c-87 -40 -264 -93 -354 -106 -80 -12 -91 -11 -165 10 l-79 23 -65 -22 c-107 -36 -126 -52 -170 -145 -42 -88 -49 -125 -27 -144 16 -13 123 -31 223 -38 64 -5 76 -2 130 25 71 36 79 44 93 97 6 22 16 49 24 58 7 10 111 69 232 131 120 62 221 118 223 125 5 16 -7 14 -65 -14z"></path>
    <path d="M1762 1437 c-29 -30 -28 -53 3 -73 48 -31 98 12 73 64 -17 35 -48 39 -76 9z"></path>
    <path d="M2181 1436 c-28 -30 -24 -57 12 -74 24 -12 31 -11 53 2 31 21 30 37 -2 70 -33 32 -35 32 -63 2z"></path>
    <path d="M2486 1429 c3 -6 61 -47 128 -90 66 -44 135 -96 152 -116 30 -34 35 -36 95 -37 58 -1 64 1 67 20 5 35 -57 81 -120 89 -52 7 -124 41 -235 112 -50 32 -102 45 -87 22z"></path>
    <path d="M1896 1414 c-33 -32 -10 -94 35 -94 23 0 59 34 59 55 0 21 -36 55 -59 55 -11 0 -27 -7 -35 -16z"></path>
    <path d="M2036 1404 c-21 -21 -20 -47 2 -67 23 -21 56 -22 76 -1 32 32 8 84 -39 84 -13 0 -31 -7 -39 -16z"></path>
    <path d="M1462 1360 c-66 -35 -100 -46 -240 -80 -49 -13 -82 -41 -82 -70 0 -18 7 -20 60 -20 37 0 74 7 93 17 58 30 267 173 267 183 0 16 -21 10 -98 -30z"></path>
    <path d="M2350 1357 c0 -16 53 -64 212 -190 54 -43 105 -89 114 -103 9 -13 20 -58 24 -98 7 -76 22 -107 73 -154 19 -18 56 -30 147 -48 68 -14 137 -24 154 -22 28 3 31 7 33 38 2 19 8 65 14 101 14 82 8 109 -37 158 -52 58 -112 82 -226 91 -92 7 -103 11 -200 62 -90 48 -213 119 -285 166 -20 13 -23 12 -23 -1z"></path>
    <path d="M1518 1277 c-193 -126 -227 -142 -312 -139 -84 2 -146 -23 -213 -87 -48 -46 -56 -79 -51 -201 l3 -75 99 -9 c121 -10 158 0 217 58 51 50 58 69 52 129 -9 76 7 98 171 234 149 124 176 149 176 165 0 15 -16 7 -142 -75z"></path>
    <path d="M2276 1321 c-9 -13 56 -139 102 -199 18 -24 47 -70 64 -102 33 -63 67 -87 129 -92 l34 -3 -2 48 c-2 56 -25 97 -54 97 -35 0 -53 16 -144 122 -124 144 -122 142 -129 129z"></path>
    <path d="M1664 1221 c-48 -46 -109 -92 -150 -113 -76 -40 -97 -59 -113 -100 -21 -57 12 -73 88 -42 24 10 51 32 72 62 19 26 69 91 112 145 43 54 77 104 75 112 -2 8 -36 -19 -84 -64z"></path>
    <path d="M2180 1281 c0 -30 46 -152 112 -296 72 -155 78 -186 49 -243 -28 -55 -26 -98 7 -162 40 -79 64 -93 180 -101 53 -4 116 -11 138 -14 23 -4 44 -3 47 1 3 5 12 61 22 125 15 103 15 120 2 150 -41 94 -112 149 -194 149 -41 0 -58 5 -83 27 -38 31 -160 202 -222 308 -44 76 -58 90 -58 56z"></path>
    <path d="M1986 1208 c-3 -29 -8 -120 -11 -203 -7 -166 -21 -299 -36 -328 -9 -15 -18 -17 -67 -11 -49 5 -61 3 -85 -16 -36 -28 -60 -78 -82 -167 -17 -71 -17 -73 4 -116 17 -34 33 -50 77 -73 59 -31 108 -73 162 -142 18 -23 41 -42 50 -42 10 0 40 17 68 38 27 20 89 66 137 101 67 49 89 72 96 97 17 63 -9 198 -50 256 -19 26 -68 49 -99 46 -32 -3 -48 3 -54 17 -7 18 -72 444 -81 533 -4 34 -11 62 -15 62 -5 0 -11 -24 -14 -52z"></path>
    <path d="M1755 1144 c-164 -224 -207 -264 -281 -264 -26 0 -53 -8 -75 -23 -44 -30 -106 -112 -113 -151 -5 -32 25 -231 38 -243 4 -4 60 -6 124 -4 134 3 135 4 203 105 45 67 49 101 19 176 -11 28 -20 61 -20 73 0 12 43 108 96 213 53 105 94 199 93 209 -3 13 -28 -15 -84 -91z"></path>
    <path d="M1904 1239 c-6 -8 -25 -57 -43 -109 -34 -96 -79 -194 -112 -242 -35 -48 -20 -158 21 -158 29 0 77 27 90 49 5 11 10 52 10 92 0 40 12 132 26 205 26 137 29 190 8 163z"></path>
    <path d="M2094 1233 c3 -10 15 -70 27 -133 23 -124 27 -204 15 -261 -8 -34 -5 -40 34 -83 23 -25 48 -46 56 -46 13 0 74 98 74 118 0 6 -11 21 -24 34 -16 14 -46 79 -80 171 -31 82 -63 164 -72 183 -17 35 -39 48 -30 17z"></path>

  </symbol>

  <pattern id="saree_pattern_img" width="50" height="50" x="15" y="11" patternUnits="userSpaceOnUse">
    <use href="#saree_img" width="37.7" height="22.9" fill="white" />
  </pattern>

  <rect class="path_saree" x="10" y="10" width="1200" height="500" stroke="black" style="fill: rgb(25, 36, 112);"></rect>

  <rect class="path_saree" x="10" y="10" width="1200" height="500" fill="url(#saree_pattern_img)"></rect>

</svg>

Observation: In order to avoid the pattern to begin outside the filled rect and since the symbol's viewBox="150 110 3770 2290" the pattern is using  a x and a y attributes. x="15" y="11". If this is not important for you you can remove those attributes.


来源: stackexchange

问:
Fix header in a table
I am developing a small page that is necessary to fix the header of a table, when the user scrolls, the header is still there. I wrote a small piece of code, a sample of my page, in jsfiddle and it isn't working and I don't know why. What am I doing wrong?

You can see what I have done so far here.

Follow this example

答:
Ok, it took some time to understand what you need. The thing you want to do is called "floating table header". I have tried all possible jQuery scripts that do that. I have had issues with all of them, but one. If you are simply looking for this feature and there is no sentimental value of your fiddle-code. Then use Floating header plugin. It is the most advance floating header plugin. Check the demo.

Live demo based on your fiddle, by adding Floating header plugin:

http://jsfiddle.net/2AKMh/16/

ContentLicense: CC BY-SA 3.0

Title: Fix header in a table


问:
How to Hide Google Map if longitude and latitude are not found in Laravel?
I am fetching google maps using coordinates i.e. longitude and latitude but the problem is when the latitude and longitude are not correct or null the div of google maps remain which I want to hide .
Can anyone help me in this ? Using Laravel 8</p>

答:
You could add a class to the div that hides it using @if on blade.

```<code><div class="map @if(...) hide @endif">
</code>```

Something like that.

ContentLicense: CC BY-SA 4.0

Body:
You could add a class to the div that hides it using @if on blade.

<div class="map @if(...) hide @endif">

Something like that.


问:
converting multiple list in dictionary and build dataframe to write a csv file
I'm trying to read multiple files, converting to a dictionary and then save it into a csv.
This is what I did, but I only keeps the last iteration of the files.
'''
list_keys = ["hostname", "linuxVersion", "ifconfig",
"listApplications", "nonJavaProcess", "javaProcess", "tomcatIfRunning",          "tomcatVersion"]
files = glob.glob('data/*', recursive=True)

```<code>new_data = []
for file in files:
    with open(file, 'r') as json_file:
        data = json_file.read()
        split_json = data.split('][')
        new_data.append(split_json)

dictionary = {}
final_dictionary = {}

for list in new_data:
    dictionary = dict(zip(list_keys, list))
        final_dictionary.update(dictionary)

dataframe = pandas.DataFrame(final_dictionary, index=[0], columns=list_keys)
dataframe.to_csv("relevamiento.csv", index=False)
</code>```

'''
The formating is OK in the CSV, but I only have the last file I read.

any ideas?
Thanks!!

答:
You need to append the dict in a dataframe to the large dataframe

```<code>new_data = []
dictionary = {}
final_dictionary = {}
dataframe = pandas.DataFrame()

for file in files:
    with open(file, 'r') as json_file:
        data = json_file.read()
        split_json = data.split('][')
        new_data.append(split_json)

    for list in new_data:
        dictionary = dict(zip(list_keys, list))
        final_dictionary.update(dictionary)
        df1 = pandas.DataFrame(final_dictionary, index=[0], columns=list_keys)
        dataframe = dataframe.append(df1)
    dictionary = {} ###
    final_dictionary = {} ###
    new_data = [] ####
dataframe.to_csv("relevamiento.csv", index=False)
</code>```

if json isn't required, you can do it in a lot less code

```<code>dataframe = pandas.DataFrame()

for file in files:
    df1 = pd.read_csv(file)
    dataframe = dataframe.append(df1)

dataframe.to_csv("relevamiento.csv", index=False)
</code>```

Body:
I'm trying to read multiple files, converting to a dictionary and then save it into a csv.
This is what I did, but I only keeps the last iteration of the files.
'''
list_keys = ["hostname", "linuxVersion", "ifconfig",
"listApplications", "nonJavaProcess", "javaProcess", "tomcatIfRunning",          "tomcatVersion"]
files = glob.glob('data/*', recursive=True)

new_data = []
for file in files:
    with open(file, 'r') as json_file:
        data = json_file.read()
        split_json = data.split('][')
        new_data.append(split_json)

dictionary = {}
final_dictionary = {}

for list in new_data:
    dictionary = dict(zip(list_keys, list))
        final_dictionary.update(dictionary)

dataframe = pandas.DataFrame(final_dictionary, index=[0], columns=list_keys)
dataframe.to_csv("relevamiento.csv", index=False)

'''
The formating is OK in the CSV, but I only have the last file I read.

any ideas?
Thanks!!

Body:
You need to append the dict in a dataframe to the large dataframe

new_data = []
dictionary = {}
final_dictionary = {}
dataframe = pandas.DataFrame()

for file in files:
    with open(file, 'r') as json_file:
        data = json_file.read()
        split_json = data.split('][')
        new_data.append(split_json)

    for list in new_data:
        dictionary = dict(zip(list_keys, list))
        final_dictionary.update(dictionary)
        df1 = pandas.DataFrame(final_dictionary, index=[0], columns=list_keys)
        dataframe = dataframe.append(df1)
    dictionary = {} ###
    final_dictionary = {} ###
    new_data = [] ####
dataframe.to_csv("relevamiento.csv", index=False)

if json isn't required, you can do it in a lot less code

dataframe = pandas.DataFrame()

for file in files:
    df1 = pd.read_csv(file)
    dataframe = dataframe.append(df1)

dataframe.to_csv("relevamiento.csv", index=False)


问:
JavaScript: Is there any "python's Generator" equivalent in JavaScript?
Is there any "python's Generator" equivalent in JavaScript?

PS:
Python's Generator is very memory efficient when we need to do one time iterate through a big array, hash...

"Generators are iterables, but you can only read them once. It's because they do not store all the values in memory, they generate the values on the fly"

(Python's Generator explained in this thread: What does the "yield" keyword do in Python? )

答:
You can use the yield keyword. You can read more about it here (MDN).

The yield keyword is used to pause and resume a generator function

function* range(n) {
    for (let i = 0; i < n; i++) {
        yield i;
    }
}

const generator = range(10);

console.log(generator.next());  // { value: 0, done: false }
console.log(generator.next());  // { value: 1, done: false }
...
console.log(generator.next());  // { value: 9, done: false }
console.log(generator.next());  // { value: undefined, done: true }
```
<p>Notice the <code>*</code> after the <code>function</code> keyword.</p>
<p>It's widely supported now: caniuse, MDN</p>
<hr />
<p>TypeScript notation:</p>
```function* range(n: number): IterableIterator<number> {
    for (let i = 0; i < n; i++) {
        yield i;
    }
}
```

Body:
You can use the yield keyword. You can read more about it here (MDN).

The yield keyword is used to pause and resume a generator function

function* range(n) {
    for (let i = 0; i < n; i++) {
        yield i;
    }
}

const generator = range(10);

console.log(generator.next());  // { value: 0, done: false }
console.log(generator.next());  // { value: 1, done: false }
...
console.log(generator.next());  // { value: 9, done: false }
console.log(generator.next());  // { value: undefined, done: true }

Notice the * after the function keyword.

It's widely supported now: caniuse, MDN

TypeScript notation:

function* range(n: number): IterableIterator<number> {
    for (let i = 0; i < n; i++) {
        yield i;
    }
}


问:
React hooks one checkbox checked to uncheck other checkbox
Hi I have a parent component which contains a bunch child components which are checkboxes.
parent component is something like this inside:

```<code>const [items, setItems] = useState([
{
    id:1,
    selected: false,
},
{
    id:2,
    selected: false,
}
]);
const changeSelected = (id) =>
  {
    items.forEach((item)=>
    {
      if (item.id === id)
      {
        item.selected = !item.selected;
      }
      else{
        item.selected = false;
      }
    })
  }
return(
    <div>
        {items.map((item)=>{
            <Child item={item} changeSelected={changeSelected}/>
        })}
    </div>
)
</code>```

and in the child component, it has something like this inside:

```<code>return(
    <div>
        <input type="checkbox" checked={props.item.selected} onChange={()=>{props.changeSelected(props.item.id)}} />
    </div>
)
</code>```

I know partially this isnt working is because useState is async but I dont know what to do to make it work, or if I should try a different approach? Thank you

答:
Obviously I forgot to setItem according to the two answers I received. But I think the right way to do it is to make a deep copy of my existing items, and setItems again. For my future reference, here is what I have now working (an example):

```<code>let newItems = [...items];
      newItems.forEach((item)=>
      {
        if (item.id === id)
        {
          item.selected = !item.selected;
        }
        else{
          item.selected = false;
        }
      })
    setProducts(newItems);
</code>```

Body:
Hi I have a parent component which contains a bunch child components which are checkboxes.
parent component is something like this inside:

const [items, setItems] = useState([
{
    id:1,
    selected: false,
},
{
    id:2,
    selected: false,
}
]);
const changeSelected = (id) =>
  {
    items.forEach((item)=>
    {
      if (item.id === id)
      {
        item.selected = !item.selected;
      }
      else{
        item.selected = false;
      }
    })
  }
return(

        {items.map((item)=>{
            <Child item={item} changeSelected={changeSelected}/>
        })}

)

and in the child component, it has something like this inside:

return(

        <input type="checkbox" checked={props.item.selected} onChange={()=>{props.changeSelected(props.item.id)}} />

)

I know partially this isnt working is because useState is async but I dont know what to do to make it work, or if I should try a different approach? Thank you

Body:
Obviously I forgot to setItem according to the two answers I received. But I think the right way to do it is to make a deep copy of my existing items, and setItems again. For my future reference, here is what I have now working (an example):

let newItems = [...items];
      newItems.forEach((item)=>
      {
        if (item.id === id)
        {
          item.selected = !item.selected;
        }
        else{
          item.selected = false;
        }
      })
    setProducts(newItems);


问:
How can I determine that there is a network congestion or not ? or How to make congestion in a V2V and V2I network?
I've run SUMO 0.30.0 , with Veins 5.0 and OMNET++ 4.7 with the existing example, I want to make sure that the network is congested, or make the network be congested.
Then I want to measure bandwidth and total packets (WSMs, WSAs, BSM, ACk., ... etc) during the simulation.
I cannot find either the bandwidth of the network or the number of total packets?</p>

答: This can be achieved by either increasing the number of nodes or by increasing the frequency of packet injection in network. Look out for the simulation results files after running the experiment. They have the required simulation parameters related to network congestion</p>


问:
Most idiomatic way to do validation on type
I am used to using something like the following pattern on a dynamic language to check/assert type:

```<code>function square(num) {
    // pretend we don't already have a TypeError
    if (!num instanceof Number) throw new MyCustomError("Only a number is allowed here")
    return num * num;
}
</code>```

However, js doesn't allow instanceof on primitives, well, at least in a way that helps check the type easily such as I'd want in the above. What is the recommended/idiomatic way to do this, just compare to a string? Such as:

// create our own error
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function square(num) {
  // pretend we don't want a TypeError
  if (typeof num != 'number')
    throw new ValidationError("Only a number is allowed here")
  return num * num;
}

console.log(square(2));
console.log(square('abc'));```

答:
Instead of checking if a variable is not a Number by doing an instanceof check (which does not work on primitives), try the following.

const num = 78;
console.log(isNaN(num) || typeof num !== "number");```

In here, we are using the typeof keyword, as it is supported by JavaScript primitives. We are also checking if the value is NaN.

Body:
I am used to using something like the following pattern on a dynamic language to check/assert type:

function square(num) {
    // pretend we don't already have a TypeError
    if (!num instanceof Number) throw new MyCustomError("Only a number is allowed here")
    return num * num;
}

However, js doesn't allow instanceof on primitives, well, at least in a way that helps check the type easily such as I'd want in the above. What is the recommended/idiomatic way to do this, just compare to a string? Such as:

// create our own error
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function square(num) {
  // pretend we don't want a TypeError
  if (typeof num != 'number')
    throw new ValidationError("Only a number is allowed here")
  return num * num;
}

console.log(square(2));
console.log(square('abc'));

Body:
Instead of checking if a variable is not a Number by doing an instanceof check (which does not work on primitives), try the following.

const num = 78;
console.log(isNaN(num) || typeof num !== "number");

In here, we are using the typeof keyword, as it is supported by JavaScript primitives. We are also checking if the value is NaN.


问:
How to check if a variable is a boolean type
```<code>o = console.log(isNaN(c));
        if(o === false){
            console.log(33);
        }
        if(o === true){
            console.log(39)
        }
</code>```

Is this the correct way to check if something is of a boolean value|??

答:
Just check the type.

If Javascript would not have this feature, you could convert the value to boolean and check with strict comparison.

```<code>value === Boolean(value)
</code>```

function isBoolean(value) {
    return typeof value === 'boolean';
}

console.log(isBoolean(1));
console.log(isBoolean(0));
console.log(isBoolean(true));
console.log(isBoolean(false));```

Body:
o = console.log(isNaN(c));
        if(o === false){
            console.log(33);
        }
        if(o === true){
            console.log(39)
        }

Is this the correct way to check if something is of a boolean value|??

Body:
Just check the type.

If Javascript would not have this feature, you could convert the value to boolean and check with strict comparison.

value === Boolean(value)

function isBoolean(value) {
    return typeof value === 'boolean';
}

console.log(isBoolean(1));
console.log(isBoolean(0));
console.log(isBoolean(true));
console.log(isBoolean(false));


问:
What do these PHP mbstring settings do?
I'm trying to figure out exactly what these php.ini settings do. What happens when they're set to different values? When are they necessary? When are they harmful?

mbstring.language

mbstring.http_input

mbstring.http_output

mbstring.encoding_translation

As usual, the PHP manual is less than helpful.

EDIT: Just to clarify, I understand how character encodings work, and I understand how PHP's multi-byte functions differ from their single-byte counterparts. I'm looking for specifics on what the above settings do.

EDIT 2: OK, it looks like they actually do provide more documentation than just the page on runtime configuration, which just has one-line summaries. The first three of these have similarly-named functions, and there are more details on the pages that describe the function versions. I added links above.

EDIT 3: Adding a bounty. I'm looking for specific details on exactly what these settings do, especially the last three. What do they convert from and to, and when do they do it?

答:
I think everything is explained by the demonstration in this example:

http://fr2.php.net/manual/en/function.mb-internal-encoding.php#53265

Though it's not used in it, you can deduce the use of mbstring.http_input.

Title: What do these PHP mbstring settings do?


问:
Split data frame string column into multiple columns (comma separated characters)
I am trying to split a column of comma separated characters into several columns (as many as different characters overall).
I read similar questions such as this:

Split data frame string column into multiple columns

But the solutions were based on a small number of possible characters, so that the new columns could be named in advanced before the columns was split.

This is my example:

```<code>subject <- c(1,2,3)
 letters <- c("a, b, f, g", "b, g, m, l", "g, m, z")

df1 <- data.frame(subject, letters)

df1

 subject    letters
1       1 a, b, f, g
2       2 b, g, m, l
3       3    g, m, z
</code>```

The desired result would be:

```<code>  subject a b f g m z
1       1 1 1 1 1 0 0
2       2 0 1 0 1 1 0
3       3 0 0 0 1 1 1
</code>```

Thanks in advance for any help.

答:
One option using str_split, unnest_longer and table

subject <- c(1,2,3)
letters <- c("a, b, f, g", "b, g, m, l", "g, m, z")

df1 <- data.frame(subject, letters)

library(tidyverse)

df1 %>%
  mutate(letters = str_split(letters, ', ')) %>%
  unnest_longer(letters) %>%
  table
#>        letters
#> subject a b f g l m z
#>       1 1 1 1 1 0 0 0
#>       2 0 1 0 1 1 1 0
#>       3 0 0 0 1 0 1 1
```
<p><sup>Created on 2022-02-10 by the reprex package (v2.0.0)</sup></p>
<hr />
<p>Seeing some of the other answers, <code>separate_rows</code> is a better solution here</p>
<pre class="lang-r prettyprint-override"><code>df1 %>%
  separate_rows(letters) %>%
  table
</code>```

Body:
I am trying to split a column of comma separated characters into several columns (as many as different characters overall).
I read similar questions such as this:

Split data frame string column into multiple columns

But the solutions were based on a small number of possible characters, so that the new columns could be named in advanced before the columns was split.

This is my example:

subject <- c(1,2,3)
 letters <- c("a, b, f, g", "b, g, m, l", "g, m, z")

df1 <- data.frame(subject, letters)

df1

 subject    letters
1       1 a, b, f, g
2       2 b, g, m, l
3       3    g, m, z

The desired result would be:

  subject a b f g m z
1       1 1 1 1 1 0 0
2       2 0 1 0 1 1 0
3       3 0 0 0 1 1 1

Thanks in advance for any help.

Body:
One option using str_split, unnest_longer and table

subject <- c(1,2,3)
letters <- c("a, b, f, g", "b, g, m, l", "g, m, z")

df1 <- data.frame(subject, letters)

library(tidyverse)

df1 %>%
  mutate(letters = str_split(letters, ', ')) %>%
  unnest_longer(letters) %>%
  table
#>        letters
#> subject a b f g l m z
#>       1 1 1 1 1 0 0 0
#>       2 0 1 0 1 1 1 0
#>       3 0 0 0 1 0 1 1

Created on 2022-02-10 by the reprex package (v2.0.0)

Seeing some of the other answers, separate_rows is a better solution here

df1 %>%
  separate_rows(letters) %>%
  table


问:
Counting values in SQL with conditional logic / multiple criteria
I have a table that contains several thousand products with the following columns:

scores: includes the quality of a score from 1-100

y_2018: the product was in service during 2018

y_2020: the product was in service during 2020

y_2021: the product was in service during 2021

My objective is to categorize products by the different years that they have been in service. This would mean there would be a "1/3" column for products in service only in 2018, only in 2020, and only in 2021. There would also be a "2/3" column for products in service in 2018 and 2020 but not 2021, 2018 and 2021 but not 2020, and 2020 and 2021 but not 2018. Lastly there would be a "3/3" column for the products that have been in service for 2018, 2020, and 2021. This is the code I have thusfar:

```<code>SELECT
case
when (case scores)>=0 and scores<30 then '0-30'
when (case scores)>=30 and scores<70 then '30-70'
when (case scores)>=70 and scores<100 then '70-100'
ELSE NULL end as "Score Range"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NULL AND y_2021 IS
NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NOT NULL AND y_2021 IS NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END) AS "1/3"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NOT NULL AND y_2021 IS
NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NOT NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020
IS NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END) AS "2/3"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NOT NULL AND y_2021 IS
NOT NULL) THEN 1 ELSE 0 END) AS "3/3"
FROM table
GROUP BY 1
ORDER BY 1
</code>```

I think I'm close and my current output looks like this:

```<code>Score Range  |  1/3    2/3   3/3
70-100       |  2000   2000   500
30-70        |  1000   1000   300
0-30         |  1500   1500   400
</code>```

The main question I have is why the "1/3" and "2/3" are the same and how can I adjust my query to get what I'm looking for?

答:
I don't know if I'm understanding this correctly, but if you want a column for each year they were in service, you can just repeat your existing count with minimal editing.

```<code>,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NOT NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NULL and y_2021 IS NOT NULL THEN 1
   ELSE NULL END) AS "COUNT 1/3"
,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NOT NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NOT NULL and y_2020 IS NULL and y_2021 IS NOT NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NOT NULL and y_2021 IS NOT NULL THEN 1
   ELSE NULL END) AS "COUNT 2/3"
,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NOT NULL and y_2021 IS NOT NULL THEN 1
ELSE NULL END) AS "COUNT 3/3"
</code>```

edit: to add multiple 'when' conditions per grouping

Body:
I have a table that contains several thousand products with the following columns:

scores: includes the quality of a score from 1-100

y_2018: the product was in service during 2018

y_2020: the product was in service during 2020

y_2021: the product was in service during 2021

My objective is to categorize products by the different years that they have been in service. This would mean there would be a "1/3" column for products in service only in 2018, only in 2020, and only in 2021. There would also be a "2/3" column for products in service in 2018 and 2020 but not 2021, 2018 and 2021 but not 2020, and 2020 and 2021 but not 2018. Lastly there would be a "3/3" column for the products that have been in service for 2018, 2020, and 2021. This is the code I have thusfar:

SELECT
case
when (case scores)>=0 and scores<30 then '0-30'
when (case scores)>=30 and scores<70 then '30-70'
when (case scores)>=70 and scores<100 then '70-100'
ELSE NULL end as "Score Range"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NULL AND y_2021 IS
NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NOT NULL AND y_2021 IS NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END) AS "1/3"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NOT NULL AND y_2021 IS
NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NULL AND y_2020
IS NOT NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END)
+
COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020
IS NULL AND y_2021 IS NOT NULL) THEN 1 ELSE 0 END) AS "2/3"
,COUNT(CASE WHEN y_2018 IS NOT NULL AND y_2020 IS NOT NULL AND y_2021 IS
NOT NULL) THEN 1 ELSE 0 END) AS "3/3"
FROM table
GROUP BY 1
ORDER BY 1

I think I'm close and my current output looks like this:

Score Range  |  1/3    2/3   3/3
70-100       |  2000   2000   500
30-70        |  1000   1000   300
0-30         |  1500   1500   400

The main question I have is why the "1/3" and "2/3" are the same and how can I adjust my query to get what I'm looking for?

Body:
I don't know if I'm understanding this correctly, but if you want a column for each year they were in service, you can just repeat your existing count with minimal editing.

,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NOT NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NULL and y_2021 IS NOT NULL THEN 1
   ELSE NULL END) AS "COUNT 1/3"
,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NOT NULL and y_2021 IS NULL THEN 1
   WHEN y_2018 IS NOT NULL and y_2020 IS NULL and y_2021 IS NOT NULL THEN 1
   WHEN y_2018 IS NULL and y_2020 IS NOT NULL and y_2021 IS NOT NULL THEN 1
   ELSE NULL END) AS "COUNT 2/3"
,COUNT(CASE
   WHEN y_2018 IS NOT NULL and y_2020 IS NOT NULL and y_2021 IS NOT NULL THEN 1
ELSE NULL END) AS "COUNT 3/3"

edit: to add multiple 'when' conditions per grouping


问:
using primarykeyrelated for post and string for get call in django rest framework
I have a model in which some fields are a foreign key to another model. Hence while creating the object of that model I have to use primary key but while calling get api I need to show those fields as stringrelated field. How to achieve that??

My model:

```<code>class Example(models.Model):

    tour = models.ForeignKey(
        Package,
        on_delete=models.CASCADE,
        null=True,
        related_name="example"
    )

    site = models.ForeignKey(
                                Destination,
                                on_delete=models.CASCADE,
                                null= True,
                                related_name= "example",
    )

    location = models.CharField(blank=True)
    /...........other fields........../
</code>```

My serializer:

```<code>class ExampleSerializer(serializers.ModelSerializer):

    # tour = serializers.StringRelatedField()
    # site = serializers.StringRelatedField()

    class Meta:
        model = OnlineClass
        fields = ['id','tour','site','other fields.....']

    def to_representation(self, instance):
        data = super(ExampleSerializer, self).to_representation(instance)
        return data
</code>```

Here while creating the example object, I need to pass tour and site as ids but while calling list method I need to show both fields as string related fields. As I define them as stringrelated field as above (later commented out) , I can create the object but those fields will be set as null. I don't want to make another serializer. How to achieve this??

答:
What you want is the the slug related field which can be used to target the id (or whatever field you want) of your targeted relation.

Something like :

```<code>tour= serializers.SlugRelatedField(
    read_only=True,
    slug_field='id'
)
</code>```

Body:
I have a model in which some fields are a foreign key to another model. Hence while creating the object of that model I have to use primary key but while calling get api I need to show those fields as stringrelated field. How to achieve that??

My model:

class Example(models.Model):

    tour = models.ForeignKey(
        Package,
        on_delete=models.CASCADE,
        null=True,
        related_name="example"
    )

    site = models.ForeignKey(
                                Destination,
                                on_delete=models.CASCADE,
                                null= True,
                                related_name= "example",
    )

    location = models.CharField(blank=True)
    /...........other fields........../

My serializer:

class ExampleSerializer(serializers.ModelSerializer):

    # tour = serializers.StringRelatedField()
    # site = serializers.StringRelatedField()

    class Meta:
        model = OnlineClass
        fields = ['id','tour','site','other fields.....']

    def to_representation(self, instance):
        data = super(ExampleSerializer, self).to_representation(instance)
        return data

Here while creating the example object, I need to pass tour and site as ids but while calling list method I need to show both fields as string related fields. As I define them as stringrelated field as above (later commented out) , I can create the object but those fields will be set as null. I don't want to make another serializer. How to achieve this??

Body:
What you want is the the slug related field which can be used to target the id (or whatever field you want) of your targeted relation.

Something like :

tour= serializers.SlugRelatedField(
    read_only=True,
    slug_field='id'
)


问:
SQL Query Where Condition to find something based on date range
New to the world of SQL and struggling with something that I'm sure is pretty simple. Is it possible to query a where condition to look for a date in the future based off a date range?

Example. Anything sold between 2022-02-01 - 2022-02-05 for delivery outside of 120 days from sale date.

答:
In Snowflake:

```<code>WITH data(sold_date, delivery_date, details) AS (
    SELECT * FROM VALUES
        ('2022-02-02',  '2022-03-02', 'too soon'),
        ('2022-02-02',  '2022-06-02', 'just right')
)
SELECT d.*
FROM data AS d
WHERE d.sold_date BETWEEN '2022-02-01' AND '2022-02-05'
    AND d.delivery_date >= DATEADD('day', 120, d.sold_date)
</code>```

gives:

SOLD_DATE
DELIVERY_DATE
DETAILS

2022-02-02
2022-06-02
just right

Body:
In Snowflake:

WITH data(sold_date, delivery_date, details) AS (
    SELECT * FROM VALUES
        ('2022-02-02',  '2022-03-02', 'too soon'),
        ('2022-02-02',  '2022-06-02', 'just right')
)
SELECT d.*
FROM data AS d
WHERE d.sold_date BETWEEN '2022-02-01' AND '2022-02-05'
    AND d.delivery_date >= DATEADD('day', 120, d.sold_date)

gives:

SOLD_DATE
DELIVERY_DATE
DETAILS

2022-02-02
2022-06-02
just right


问:
C# functions and optional parameters
I know that in C# it is possible to define optional parameters. My question is directed at how flexible this is.

Let f be a function as below, with a mandatory and b, c optional :

```<code>class Test {
   public void f(int a, int b = 2, int c = 3) {
      //...
   }
}
</code>```

Now, I know I can call the function in the following ways :

f(1) -> a equals 1, b equals 2, c equals 3

f(11,22) -> a equals 11, b equals 22, c equals 3

f(11,22,33) -> a equals 11, b equals 22, c equals 33

How do I do to not specify b, but a and c ?

答:
Another possibility would be to define the method with other parameters and call the original one with them using this syntax:

```<code>public void f(int a, int c = 3) => f(a, 2, c)
</code>```

More comfortable usability if you call it, but gets fiddly to define if you have more than 2 optional parameters .

Title: C# functions and optional parameters

Body:
I know that in C# it is possible to define optional parameters. My question is directed at how flexible this is.

Let f be a function as below, with a mandatory and b, c optional :

class Test {
   public void f(int a, int b = 2, int c = 3) {
      //...
   }
}

Now, I know I can call the function in the following ways :

f(1) -> a equals 1, b equals 2, c equals 3

f(11,22) -> a equals 11, b equals 22, c equals 3

f(11,22,33) -> a equals 11, b equals 22, c equals 33

How do I do to not specify b, but a and c ?

Body:
Another possibility would be to define the method with other parameters and call the original one with them using this syntax:

public void f(int a, int c = 3) => f(a, 2, c)

More comfortable usability if you call it, but gets fiddly to define if you have more than 2 optional parameters .


问:
How i can reapirt problem in new flutter project
When i create new flutter project and click run i have this problem

"Could not initialize class com.android.sdklib.repository.AndroidSdkHandler"

enter image description here

Flutter doctor
enter image description here

答:
go to Android/build.gradle.

if jCenter() exist try this change:

```<code>buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
      jCenter()   // change this to mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
       jCenter()   // change this to mavenCentral()
    }
}
</code>```

Body:
go to Android/build.gradle.

if jCenter() exist try this change:

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
      jCenter()   // change this to mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
       jCenter()   // change this to mavenCentral()
    }
}


问:
How to use Vuetify color picker (v-color-picker) at HEX mode without opacity option
So I've been trying to use vuetify's color picker with hexa mode like this:

```<code>      <v-color-picker
        v-model="color"
        mode="hexa"
        hide-mode-switch
        class="mb-4"
      />
</code>```

And I can't figure out how to disable the opacity slider, I want to be able to keep the color slider without the opacity one. So at the input the user sees the color like #FF0000 (7 digits) and not #FF0000FF (9 digits).

The hide-sliders prop hide them both (color and opacity) and there is not a specific one to the opacity slider.

答:
I know the problem is old, but I hope this solution helps someone.

This request has not yet been answered by the vuetify team, however, you can follow the process here:

https://github.com/vuetifyjs/vuetify/issues/9590

When they don't answer, this solution worked for me.

```<code>watch: {
    color(value) {
      // temporary fix while there is no way to disable the alpha channel in the colorpicker component: https://github.com/vuetifyjs/vuetify/issues/9590
      if (value.toString().match(/#[a-zA-Z0-9]{8}/)) {
        this.color = value.substr(0, 7);
      }
    }
}
</code>```

color is the v-model of the <v-color-picker-component>

Body:
So I've been trying to use vuetify's color picker with hexa mode like this:

      <v-color-picker
        v-model="color"
        mode="hexa"
        hide-mode-switch
        class="mb-4"
      />

And I can't figure out how to disable the opacity slider, I want to be able to keep the color slider without the opacity one. So at the input the user sees the color like #FF0000 (7 digits) and not #FF0000FF (9 digits).

The hide-sliders prop hide them both (color and opacity) and there is not a specific one to the opacity slider.

Body:
I know the problem is old, but I hope this solution helps someone.

This request has not yet been answered by the vuetify team, however, you can follow the process here:

https://github.com/vuetifyjs/vuetify/issues/9590

When they don't answer, this solution worked for me.

watch: {
    color(value) {
      // temporary fix while there is no way to disable the alpha channel in the colorpicker component: https://github.com/vuetifyjs/vuetify/issues/9590
      if (value.toString().match(/#[a-zA-Z0-9]{8}/)) {
        this.color = value.substr(0, 7);
      }
    }
}

color is the v-model of the <v-color-picker-component>


问:
Command to show set prefix in discord.py (rewrite)
I'm trying to make a help command that sends the current server-prefixes for the bot in an embed. I'm having some trouble trying to figure out how to code this, and I would love some help. I have tried doing:

```<code>@bot.command()
async def help(ctx):
    embed = discord.Embed(
        title='Help', description='', colour=discord.Colour.blue())
    embed.set_footer(text='Have fun!')

    prefix = command_prefix

    embed.add_field(
        name='Prefix',
        value=
        f'The current prefix for this server is {prefix}',
        inline=True)

    await ctx.send(embed=embed)
</code>```

However when I do this I get the error:

```<code>raise CommandInvokeError(exc) from exc
discord.ext.commands.errors.CommandInvokeError: Command raised an exception: NameError: name 'command_prefix' is not defined
</code>```

I'm not sure what I'm doing wrong, any help would be appreciated. (:

答:
If anyone is still interested in the question, you can do:

```<code>client.commmand_prefix #if u use bot, just use bot.command_prefix
</code>```

in this case it would be:

```<code>@bot.command()
async def help(ctx):
    embed = discord.Embed(
        title='Help', description='', colour=discord.Colour.blue())
    embed.set_footer(text='Have fun!')

    prefix = command_prefix

    embed.add_field(
        name='Prefix',
        value=
        f'The current prefix for this server is {bot.command_prefix}',
        inline=True)

    await ctx.send(embed=embed)
</code>```

Body:
I'm trying to make a help command that sends the current server-prefixes for the bot in an embed. I'm having some trouble trying to figure out how to code this, and I would love some help. I have tried doing:

@bot.command()
async def help(ctx):
    embed = discord.Embed(
        title='Help', description='', colour=discord.Colour.blue())
    embed.set_footer(text='Have fun!')

    prefix = command_prefix

    embed.add_field(
        name='Prefix',
        value=
        f'The current prefix for this server is {prefix}',
        inline=True)

    await ctx.send(embed=embed)

However when I do this I get the error:

raise CommandInvokeError(exc) from exc
discord.ext.commands.errors.CommandInvokeError: Command raised an exception: NameError: name 'command_prefix' is not defined

I'm not sure what I'm doing wrong, any help would be appreciated. (:

Body:
If anyone is still interested in the question, you can do:

client.commmand_prefix #if u use bot, just use bot.command_prefix

in this case it would be:

@bot.command()
async def help(ctx):
    embed = discord.Embed(
        title='Help', description='', colour=discord.Colour.blue())
    embed.set_footer(text='Have fun!')

    prefix = command_prefix

    embed.add_field(
        name='Prefix',
        value=
        f'The current prefix for this server is {bot.command_prefix}',
        inline=True)

    await ctx.send(embed=embed)


问:
FPDF Image Error: Unsupported image type after upgrading to PHP 8
I have a signature stored as a base64 string that outputs into PDF reports like so:

```<code>$image = $row1['signatureString'];

$trimmedSig = substr($image, 22);

$pic = 'data:image/gif;base64,' . $trimmedSig;

     $pdf->Cell(20, 7, $pdf->Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'png'), 'TBL', 0, 'L', false);

</code>```

after I updagraded to PHP 8, I now get the following error:

```<code>
Fatal error: Uncaught Exception: FPDF error: Unsupported image type: 7 in /var/www/html/packages/fpdf182/fpdf.php:271
Stack trace:
#0 /var/www/html/packages/fpdf182/fpdf.php(890): FPDF->Error('Unsupported ima...')
#1 /var/www/html/pdfReports/generatePDF.php(1799): FPDF->Image('data:image/gif;...', 'C', 175.00125, 73.00125, 30, '7', 'png')
#2 /var/www/html/genPDFReport.php(13): include('/var/www/html/p...')
#3 {main} thrown in /var/www/html/packages/fpdf182/fpdf.php on line 271

</code>```

答:
You have

```<code>$pic = 'data:image/gif;base64,' . $trimmedSig;
</code>```

but then use

```<code>Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'png')
</code>```

I guess it should be

```<code>Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'gif')
</code>```

Body:
I have a signature stored as a base64 string that outputs into PDF reports like so:

$image = $row1['signatureString'];

$trimmedSig = substr($image, 22);

$pic = 'data:image/gif;base64,' . $trimmedSig;

     $pdf->Cell(20, 7, $pdf->Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'png'), 'TBL', 0, 'L', false);

after I updagraded to PHP 8, I now get the following error:

Fatal error: Uncaught Exception: FPDF error: Unsupported image type: 7 in /var/www/html/packages/fpdf182/fpdf.php:271
Stack trace:
#0 /var/www/html/packages/fpdf182/fpdf.php(890): FPDF->Error('Unsupported ima...')
#1 /var/www/html/pdfReports/generatePDF.php(1799): FPDF->Image('data:image/gif;...', 'C', 175.00125, 73.00125, 30, '7', 'png')
#2 /var/www/html/genPDFReport.php(13): include('/var/www/html/p...')
#3 {main} thrown in /var/www/html/packages/fpdf182/fpdf.php on line 271

Body:
You have

$pic = 'data:image/gif;base64,' . $trimmedSig;

but then use

Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'png')

I guess it should be

Image($pic, 'C', $pdf->GetX(), $pdf->GetY(), 30, 7, 'gif')


问:
JS destructing based on a condition
I'm following this example for dependent fields
https://formik.org/docs/examples/dependent-fields

At this point

```<code>const {
    values: { taxRefundAmount },
    setFieldValue,
  } = useFormikContext()
</code>```

I want to destructure values based on a certain condition like this for example

```<code>const {
    values: { props.name === 'taxRefundVATAmount' ? taxRefundAmount : taxChargeAmount },
    setFieldValue,
  } = useFormikContext()
</code>```

Of course, this throws an error. Is this even possible?

答:
You could do something like this, get the bits you need and do it the simple way without the spread operator:</p>
```<code>const formikContext = useFormikContext();
const setFieldValue = formikContext.setFieldValue ;
const values = props.name === 'taxRefundVATAmount'
               ? formikContext.values.taxRefundAmount
               : formikContext.values.taxChargeAmount;

</code>```

Title: JS destructing based on a condition

Body:
I'm following this example for dependent fields
https://formik.org/docs/examples/dependent-fields

At this point

const {
    values: { taxRefundAmount },
    setFieldValue,
  } = useFormikContext()

I want to destructure values based on a certain condition like this for example

const {
    values: { props.name === 'taxRefundVATAmount' ? taxRefundAmount : taxChargeAmount },
    setFieldValue,
  } = useFormikContext()

Of course, this throws an error. Is this even possible?

Body:
You could do something like this, get the bits you need and do it the simple way without the spread operator:

const formikContext = useFormikContext();
const setFieldValue = formikContext.setFieldValue ;
const values = props.name === 'taxRefundVATAmount'
               ? formikContext.values.taxRefundAmount
               : formikContext.values.taxChargeAmount;


问:
Include a module as a dependency into a KMM project's shared module
I have a working KMM application, and I have a java module, mymodule, that I created with File->New->Module->Java or Kotlin library.

The module exists at the top level beside androidApp, iosApp and shared. In my settings.gradle.kts I have include(":mymodule").

I want to use mymodule in the shared module. So I go into the shared module's build.gradle.kts and I try to include my module in commonMain:

kotlin {
    ...
    sourceSets {
        val commonMain by getting {
          dependencies {
              implementation(project(":mymodule"))
          }
        }
        ...
    }
    ...
}
...
```
<p>And the error is <code>Could not resolve MyKMMApplication:mymodule:unspecified</code> and:</p>
```Could not resolve project :mymodule.
Required by:
    project :shared
```

Things I've tried

I can put dependencies { implementation(project(":mymodule")) } at the bottom of shared's build.gradle.kts and but still the same error appears

As to test if there's other problems, I can also import mymodule into the Android project without problems

I can include implementation("com.squareup.sqldelight:runtime:1.5.3") in commonMain and see those classes in the shared module no problem

The docs say you can include another multiplatform module, but nothing about a normal module.

How can I include a modules into KMM's shared module as a dependency?

答:
So, the module you include into shared needs to be a multiplatform module. It's build.gradle.kts file should look something like this:

plugins {
    id("org.jetbrains.kotlin.multiplatform")
}

kotlin {
  jvm()
  iosX64()
  iosArm32()
  iosArm64()
}
```

And it's project structure should look something like: mymodule/src/commonMain/kotlin/com/example/mymodule/.

Body:
I have a working KMM application, and I have a java module, mymodule, that I created with File->New->Module->Java or Kotlin library.

The module exists at the top level beside androidApp, iosApp and shared. In my settings.gradle.kts I have include(":mymodule").

I want to use mymodule in the shared module. So I go into the shared module's build.gradle.kts and I try to include my module in commonMain:

kotlin {
    ...
    sourceSets {
        val commonMain by getting {
          dependencies {
              implementation(project(":mymodule"))
          }
        }
        ...
    }
    ...
}
...

And the error is Could not resolve MyKMMApplication:mymodule:unspecified and:

Could not resolve project :mymodule.
Required by:
    project :shared

Things I've tried

I can put dependencies { implementation(project(":mymodule")) } at the bottom of shared's build.gradle.kts and but still the same error appears

As to test if there's other problems, I can also import mymodule into the Android project without problems

I can include implementation("com.squareup.sqldelight:runtime:1.5.3") in commonMain and see those classes in the shared module no problem

The docs say you can include another multiplatform module, but nothing about a normal module.

How can I include a modules into KMM's shared module as a dependency?

Body:
So, the module you include into shared needs to be a multiplatform module. It's build.gradle.kts file should look something like this:

plugins {
    id("org.jetbrains.kotlin.multiplatform")
}

kotlin {
  jvm()
  iosX64()
  iosArm32()
  iosArm64()
}

And it's project structure should look something like: mymodule/src/commonMain/kotlin/com/example/mymodule/.


答:
you can use typeof

```<code> var typeCheck = true
 console.log(typeof typeCheck);
// expected output: "boolean"
</code>```

Here is the documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

Title: How to check if a variable is a boolean type

Body:
o = console.log(isNaN(c));
        if(o === false){
            console.log(33);
        }
        if(o === true){
            console.log(39)
        }

Is this the correct way to check if something is of a boolean value|??

Body:
you can use typeof

 var typeCheck = true
 console.log(typeof typeCheck);
// expected output: "boolean"

Here is the documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof


问:
Finding spots in a numpy matrix
I have the following Matrix made of 0s and 1s which I want to identify its spots(elements with the value 1 and connected to eachothers).

```<code>M = np.array([[1,1,1,0,0,0,0,0,0,0,0],
              [1,1,1,0,0,0,0,0,0,1,1],
              [1,1,1,0,0,0,0,0,0,1,1],
              [1,1,1,0,0,1,1,1,0,0,0],
              [0,0,0,0,0,1,1,1,0,0,0],
              [1,1,1,0,1,1,1,1,0,0,0],
              [1,1,1,0,0,1,1,1,0,0,0],
              [1,1,1,0,0,1,1,1,0,0,0]])
</code>```

In the matrix there are four spots.

an example of my output should seem the following

```<code>spot_0 = array[(0,0),(0,1), (0,2), (1,0),(1,1), (1,2), (2,0),(2,1), (2,2), (3,0),(3,1), (3,2)]
Nbr_0 = 12
Top_Left = (0, 0)
and that is the same process for the other 3 spots
</code>```

Does anyone know how can I identify each spot with the number of its elements and top_left element, using numpy functions ?
Thanks

答:
You can use a connected component labeling to find the spots. Then, you can use np.max so to find the number of component and np.argwhere so to find the locations of each component. Here is an example:

# OpenCV provides a similar function
from skimage.measure import label

components = label(M)
# array([[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
#        [1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2],
#        [1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2],
#        [1, 1, 1, 0, 0, 3, 3, 3, 0, 0, 0],
#        [0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 3, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 0, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 0, 3, 3, 3, 0, 0, 0]])

for i in range(1, np.max(components)+1):
    spot_i = np.argwhere(components == i)
    Nbr_i = len(spot_i)
    Top_Left_i = spot_i[0]
```

Note that Top_Left only make sense for a rectangular area. If they are not rectangular this point needs to be carefully defined.

Note also that this method is only efficient with few component. If there are many component, then it is better to replace the current loop by an iteration over the components array (in this case the output structure is stored in a list l and l[components[i,j]] is updated with the information found for all item location (i,j) of components). This last algorithm will be slow unless Numba/Cython are used to speed the process up.

Title: Finding spots in a numpy matrix

Body:
I have the following Matrix made of 0s and 1s which I want to identify its spots(elements with the value 1 and connected to eachothers).

M = np.array([[1,1,1,0,0,0,0,0,0,0,0],
              [1,1,1,0,0,0,0,0,0,1,1],
              [1,1,1,0,0,0,0,0,0,1,1],
              [1,1,1,0,0,1,1,1,0,0,0],
              [0,0,0,0,0,1,1,1,0,0,0],
              [1,1,1,0,1,1,1,1,0,0,0],
              [1,1,1,0,0,1,1,1,0,0,0],
              [1,1,1,0,0,1,1,1,0,0,0]])

In the matrix there are four spots.

an example of my output should seem the following

spot_0 = array[(0,0),(0,1), (0,2), (1,0),(1,1), (1,2), (2,0),(2,1), (2,2), (3,0),(3,1), (3,2)]
Nbr_0 = 12
Top_Left = (0, 0)
and that is the same process for the other 3 spots

Does anyone know how can I identify each spot with the number of its elements and top_left element, using numpy functions ?
Thanks

Body:
You can use a connected component labeling to find the spots. Then, you can use np.max so to find the number of component and np.argwhere so to find the locations of each component. Here is an example:

# OpenCV provides a similar function
from skimage.measure import label

components = label(M)
# array([[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
#        [1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2],
#        [1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 2],
#        [1, 1, 1, 0, 0, 3, 3, 3, 0, 0, 0],
#        [0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 3, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 0, 3, 3, 3, 0, 0, 0],
#        [4, 4, 4, 0, 0, 3, 3, 3, 0, 0, 0]])

for i in range(1, np.max(components)+1):
    spot_i = np.argwhere(components == i)
    Nbr_i = len(spot_i)
    Top_Left_i = spot_i[0]

Note that Top_Left only make sense for a rectangular area. If they are not rectangular this point needs to be carefully defined.

Note also that this method is only efficient with few component. If there are many component, then it is better to replace the current loop by an iteration over the components array (in this case the output structure is stored in a list l and l[components[i,j]] is updated with the information found for all item location (i,j) of components). This last algorithm will be slow unless Numba/Cython are used to speed the process up.


问:
Using parcel, how do I deploy my project?
Forkify (my github link) is a tutorial project I'm working on. To build the dist files, I use parcel.

When I use yarn start for local deployment, it works correctly, but when I deploy to Netlify and use yarn build, it does not work correctly. The all js code I wrote does not work.

What can I do to fix it?

package.json:

"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"}
```

答:
As others have pointed out, you do indeed have a bug (or a few) in your code.

In src/js/model.js, your init function assumes that bookmarks are already available in local storage, so a simple work around is to push an empty array if the bookmarks key doesn't exist in local storage.

```<code>export const init = function () {
  state.bookmarks.push(...JSON.parse(localStorage.getItem("bookmarks") || "[]"));
};
</code>```

Body:
As others have pointed out, you do indeed have a bug (or a few) in your code.

In src/js/model.js, your init function assumes that bookmarks are already available in local storage, so a simple work around is to push an empty array if the bookmarks key doesn't exist in local storage.

export const init = function () {
  state.bookmarks.push(...JSON.parse(localStorage.getItem("bookmarks") || "[]"));
};