i am working on guage .. needle is not rotating correctly .. it works like if first rotate angle is 30 then needle goes to 30 degree then next value is 50 then it starts from 30 angle and goest to 30+50= 80 and so on. no getting it exact angle..i have fixed centerx and centery point .. my source code is here..
fiddle link :
https://jsfiddle.net/harshadpatson/vjzywu1d/4/
used this library
<script
src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"
integrity="sha512-I+rKw3hArzZIHzrkdELbKqrXfkSvw/h0lW/GgB8FThaBVz2e5ZUlSW8kY8v3q6wq37eybIwyufkEZxe4qSlGcg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
java script code:
var guagec = $("#centreGuage");
var offset = guagec.offset();
var width = guagec.width();
var height = guagec.height();
var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
var timers = [];
var interval = setInterval(function () {
var divElem1 = document.querySelector("#needle");
var element = SVG(divElem1);
var max = 100;
var min = 0;
var value = Math.random() * 100;
var maxAngle = 320;
var minAngle = 10;
var total = max - min;
var angleval = maxAngle / 100;
var angle = (((value - min) * 100) / total) * angleval;
element.animate(500).rotate(angle, centerX, centerY);
}, 1000);
my svg code
<svg viewBox="0 0 500 500" class="gauge" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<g id="xcustom3" fill="url(#_GradLFF02X02X02XF002X02X02X0NA_)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10">
<rect id="centreGuage" data-type="needle_centre" x="66" y="210" rx="20" ry="20" width="197" height="197" stroke="rgb(240,240,240)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd"></rect>
<polygon points="195 365 191 367 194 372 198 370 " stroke="rgb(71,71,71)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(218,48,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="144 367 140 366 136 377 140 378 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="115 348 113 344 104 352 106 355 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="102 316 101 312 89 313 90 317 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="106 282 108 278 97 273 96 277 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="129 256 132 253 126 243 122 245 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="162 246 166 246 166 234 162 234 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="195 253 198 256 205 245 201 243 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="219 278 221 282 231 277 230 273 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="226 312 225 316 237 317 238 313 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="214 344 212 348 221 355 223 352 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="187 366 183 367 187 378 191 377 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="144 367 140 366 136 377 140 378 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="115 348 113 344 104 352 106 355 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="102 316 101 312 89 313 90 317 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="106 282 108 278 97 273 96 277 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="129 256 132 253 126 243 122 245 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="162 246 166 246 166 234 162 234 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="195 253 198 256 205 245 201 243 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="219 278 221 282 231 277 230 273 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="226 312 225 316 237 317 238 313 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="214 344 212 348 221 355 223 352 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="187 366 183 367 187 378 191 377 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
<g fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="71" y="319">20</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="124" y="391">0</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="88" y="362">10</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="71" y="319">20</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="80" y="275">30</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="110" y="241">40</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="154" y="229">50</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="198" y="240">60</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="230" y="273">70</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="240" y="319">80</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="222" y="364">90</text>
</g>
<g fill="rgb(71,71,71)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="14.00pt" font-weight="bold" text-anchor="start" xml:space="preserve">
<text x="183" y="392">100</text>
</g>
<rect x="130" y="359" width="70" height="24" stroke="rgb(255,232,167)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,232,167)" fill-opacity="1" fill-rule="evenodd"></rect>
<g fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold" text-anchor="middle" xml:space="preserve">
<text x="166" y="380">0</text>
</g>
<g fill="rgb(21,21,21)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold" text-anchor="middle" xml:space="preserve">
<text id="GaugeValue" x="165" y="379">29.02</text>
</g>
<g id="needle" transform="matrix(0.4483150139761999,-0.8938756335438865,0.8938756335438865,0.44831501397620044,-185.00845274737446,317.2373599063141)">
<polygon points="145 355 161 324 152 322 145 355 " stroke="rgb(105,105,105)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(160,160,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
<polygon points="146 356 162 325 153 323 146 356 " stroke="rgb(105,105,105)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(160,160,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
</g>
<g fill="rgb(0,0,196)" fill-opacity="1" fill-rule="evenodd" stroke="none" font-family="Tahoma" font-size="9.00pt" text-anchor="middle" tag-labal="used-tag=">
<text id="text_280530371" x="164" y="311">Knob</text>
</g>
</g>
<defs>
<radialGradient id="_GradLFF02X02X02XF002X02X02X0NA_" gradientUnits="objectBoundingBox" fx="0.50" fy="0.50">
<stop offset="0.000" stop-color="rgb(240,240,240)" stop-opacity="1.0"></stop>
<stop offset="1.000" stop-color="rgb(255,206,160)" stop-opacity="1.0"></stop>
</radialGradient>
</defs>
</svg>
You need to calculate the centerX/Y (pivot) point via getBBox().
.offset() will return the rendered width.
Working example
var svg = document.querySelector('svg');
var guagec = $("#centreGuage");
var needle = document.querySelector("#needle");
var gaugeValue = document.getElementById("GaugeValue");
var bb = guagec[0].getBBox();
var [x, y, width, height] = [bb.x, bb.y, bb.width, bb.height];
var [centerX, centerY] = [x + width / 2, y + height / 2];
//set initial position
needle.setAttribute('style', `transform: translate(${centerX}px, ${centerY}px) rotate(0deg) translate(-${centerX}px, -${centerY}px)`);
var timers = [];
var interval = setInterval(function () {
var max = 100;
var min = 0;
var value = Math.random() * (max - min) + min;
var maxAngle = 320;
var minAngle = 10;
var total = max - min;
var angleval = maxAngle / 100;
var angle = (((value - min) * 100) / total) * angleval;
gaugeValue.textContent = +value.toFixed(2);
needle.setAttribute('style', `transform: translate(${centerX}px, ${centerY}px) rotate(${angle}deg) translate(-${centerX}px, -${centerY}px)`);
}, 1000);
svg{
width:50%;
}
#needle{transition: 0.5s}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<svg viewBox="66 210 197 197">
<g class="gauge" id="xcustom3" fill="url(#GradLFF02X02X02XF002X02X02X0NA)" stroke="rgb(0,0,0)"
stroke-width="1" stroke-miterlimit="10">
<rect id="centreGuage" x="66" y="210" rx="20" ry="20" width="197" height="197" stroke="rgb(240,240,240)" fill="rgb(240,240,240)" />
<polygon
points="220 319 220 318 220 317 220 316 220 316 220 315 221 314 221 313 221 313 221 312 221 311 221 310 221 309 221 309 221 308 221 307 209 307 209 308 209 308 209 309 209 310 209 310 209 311 209 312 209 312 209 313 209 314 208 314 208 315 208 315 208 316 208 317 220 319"
stroke="rgb(72,72,72)" fill="rgb(72,72,72)" />
<polygon
points="216 331 216 330 217 329 217 328 217 327 218 327 218 326 218 325 218 324 219 324 219 323 219 322 219 321 219 320 220 320 220 319 208 317 208 317 208 318 208 319 207 319 207 320 207 320 207 321 207 322 206 322 206 323 206 323 206 324 206 324 205 325 205 326 216 331"
stroke="rgb(54,54,54)" fill="rgb(54,54,54)" />
<polygon
points="210 341 210 341 211 340 211 339 212 338 212 338 213 337 213 336 213 336 214 335 214 334 215 334 215 333 215 332 216 331 216 331 205 326 205 326 205 327 204 327 204 328 204 329 203 329 203 330 203 330 202 331 202 332 202 332 201 333 201 333 200 334 200 334 210 341"
stroke="rgb(36,36,36)" fill="rgb(36,36,36)" />
<polygon
points="202 350 203 349 203 349 204 348 204 348 205 347 205 347 206 346 206 345 207 345 207 344 208 344 208 343 209 342 209 342 210 341 200 334 200 335 199 335 199 336 199 336 198 337 198 337 197 338 197 338 197 338 196 339 196 339 195 340 195 340 194 341 194 341 202 350"
stroke="rgb(18,18,18)" fill="rgb(18,18,18)" />
<polygon
points="192 357 192 357 193 357 194 356 195 356 195 355 196 355 197 354 197 354 198 353 199 353 199 352 200 352 201 351 201 350 202 350 194 341 194 341 193 342 192 342 192 343 191 343 191 344 190 344 190 344 189 345 189 345 188 346 187 346 187 346 186 347 186 347 192 357"
stroke="rgb(0,0,0)" fill="rgb(0,0,0)" />
<polygon
points="181 362 182 362 182 362 183 361 184 361 184 361 185 361 186 360 187 360 187 360 188 359 189 359 190 359 190 358 191 358 192 357 186 347 185 347 184 348 184 348 183 348 183 349 182 349 181 349 181 349 180 350 180 350 179 350 178 350 178 351 177 351 177 351 181 362"
stroke="rgb(0,0,0)" fill="rgb(0,0,0)" />
<polygon
points="169 365 170 365 170 365 171 364 172 364 173 364 174 364 174 364 175 364 176 364 177 363 178 363 178 363 179 363 180 362 181 362 177 351 176 351 176 351 175 351 174 352 174 352 173 352 173 352 172 352 171 352 171 352 170 352 170 353 169 353 168 353 168 353 169 365"
stroke="rgb(18,18,18)" fill="rgb(18,18,18)" />
<polygon
points="157 365 158 365 159 365 159 365 160 365 161 365 162 365 163 365 163 365 164 365 165 365 166 365 167 365 167 365 168 365 169 365 168 353 167 353 167 353 166 353 165 353 165 353 164 353 163 353 163 353 162 353 161 353 161 353 160 353 159 353 159 353 158 353 157 365"
stroke="rgb(36,36,36)" fill="rgb(36,36,36)" />
<polygon
points="145 362 146 362 147 363 148 363 148 363 149 363 150 364 151 364 152 364 152 364 153 364 154 364 155 364 156 365 156 365 157 365 158 353 158 353 157 353 156 353 156 352 155 352 155 352 154 352 153 352 153 352 152 352 152 352 151 351 150 351 150 351 149 351 145 362"
stroke="rgb(54,54,54)" fill="rgb(54,54,54)" />
<polygon
points="134 357 135 358 136 358 136 359 137 359 138 359 139 360 139 360 140 360 141 361 142 361 142 361 143 361 144 362 144 362 145 362 149 351 149 351 148 351 148 350 147 350 146 350 146 350 145 349 145 349 144 349 143 349 143 348 142 348 142 348 141 347 140 347 134 357"
stroke="rgb(72,72,72)" fill="rgb(72,72,72)" />
<polygon
points="124 350 125 350 125 351 126 352 127 352 127 353 128 353 129 354 129 354 130 355 131 355 131 356 132 356 133 357 134 357 134 357 140 347 140 347 139 346 139 346 138 346 137 345 137 345 136 344 136 344 135 344 135 343 134 343 134 342 133 342 132 341 132 341 124 350"
stroke="rgb(90,90,90)" fill="rgb(90,90,90)" />
<polygon
points="116 341 117 342 117 342 118 343 118 344 119 344 119 345 120 345 120 346 121 347 121 347 122 348 122 348 123 349 123 349 124 350 132 341 132 341 131 340 131 340 130 339 130 339 129 338 129 338 129 338 128 337 128 337 127 336 127 336 127 335 126 335 126 334 116 341"
stroke="rgb(108,108,108)" fill="rgb(108,108,108)" />
<polygon
points="110 331 110 331 111 332 111 333 111 334 112 334 112 335 113 336 113 336 113 337 114 338 114 338 115 339 115 340 116 341 116 341 126 334 126 334 125 333 125 333 124 332 124 332 124 331 123 330 123 330 123 329 122 329 122 328 122 327 121 327 121 326 121 326 110 331"
stroke="rgb(126,126,126)" fill="rgb(126,126,126)" />
<polygon
points="106 319 106 320 107 320 107 321 107 322 107 323 107 324 108 324 108 325 108 326 108 327 109 327 109 328 109 329 110 330 110 331 121 326 121 325 120 324 120 324 120 323 120 323 120 322 119 322 119 321 119 320 119 320 119 319 118 319 118 318 118 317 118 317 106 319"
stroke="rgb(144,144,144)" fill="rgb(144,144,144)" />
<polygon
points="105 307 105 308 105 309 105 309 105 310 105 311 105 312 105 313 105 313 105 314 106 315 106 316 106 316 106 317 106 318 106 319 118 317 118 316 118 315 118 315 118 314 117 314 117 313 117 312 117 312 117 311 117 310 117 310 117 309 117 308 117 308 117 307 105 307"
stroke="rgb(162,162,162)" fill="rgb(162,162,162)" />
<polygon
points="106 295 106 296 106 297 106 298 106 298 106 299 105 300 105 301 105 301 105 302 105 303 105 304 105 305 105 305 105 306 105 307 117 307 117 306 117 306 117 305 117 304 117 304 117 303 117 302 117 302 117 301 117 300 118 300 118 299 118 299 118 298 118 297 106 295"
stroke="rgb(180,180,180)" fill="rgb(180,180,180)" />
<polygon
points="110 283 110 284 109 285 109 286 109 287 108 287 108 288 108 289 108 290 107 290 107 291 107 292 107 293 107 294 106 294 106 295 118 297 118 297 118 296 118 295 119 295 119 294 119 294 119 293 119 292 120 292 120 291 120 291 120 290 120 290 121 289 121 288 110 283"
stroke="rgb(198,198,198)" fill="rgb(198,198,198)" />
<polygon
points="116 273 116 273 115 274 115 275 114 276 114 276 113 277 113 278 113 278 112 279 112 280 111 280 111 281 111 282 110 283 110 283 121 288 121 288 121 287 122 287 122 286 122 285 123 285 123 284 123 284 124 283 124 282 124 282 125 281 125 281 126 280 126 280 116 273"
stroke="rgb(216,216,216)" fill="rgb(216,216,216)" />
<polygon
points="124 264 123 265 123 265 122 266 122 266 121 267 121 267 120 268 120 269 119 269 119 270 118 270 118 271 117 272 117 272 116 273 126 280 126 279 127 279 127 278 127 278 128 277 128 277 129 276 129 276 129 276 130 275 130 275 131 274 131 274 132 273 132 273 124 264"
stroke="rgb(234,234,234)" fill="rgb(234,234,234)" />
<polygon
points="134 257 134 257 133 257 132 258 131 258 131 259 130 259 129 260 129 260 128 261 127 261 127 262 126 262 125 263 125 264 124 264 132 273 132 273 133 272 134 272 134 271 135 271 135 270 136 270 136 270 137 269 137 269 138 268 139 268 139 268 140 267 140 267 134 257"
stroke="rgb(252,252,252)" fill="rgb(252,252,252)" />
<polygon
points="145 252 144 252 144 252 143 253 142 253 142 253 141 253 140 254 139 254 139 254 138 255 137 255 136 255 136 256 135 256 134 257 140 267 141 267 142 266 142 266 143 266 143 265 144 265 145 265 145 265 146 264 146 264 147 264 148 264 148 263 149 263 149 263 145 252"
stroke="rgb(255,255,255)" fill="rgb(255,255,255)" />
<polygon
points="157 249 156 249 156 249 155 250 154 250 153 250 152 250 152 250 151 250 150 250 149 251 148 251 148 251 147 251 146 252 145 252 149 263 150 263 150 263 151 263 152 262 152 262 153 262 153 262 154 262 155 262 155 262 156 262 156 261 157 261 158 261 158 261 157 249"
stroke="rgb(237,237,237)" fill="rgb(237,237,237)" />
<polygon
points="169 249 168 249 167 249 167 249 166 249 165 249 164 249 163 249 163 249 162 249 161 249 160 249 159 249 159 249 158 249 157 249 158 261 159 261 159 261 160 261 161 261 161 261 162 261 163 261 163 261 164 261 165 261 165 261 166 261 167 261 167 261 168 261 169 249"
stroke="rgb(219,219,219)" fill="rgb(219,219,219)" />
<polygon
points="181 252 180 252 179 251 178 251 178 251 177 251 176 250 175 250 174 250 174 250 173 250 172 250 171 250 170 249 170 249 169 249 168 261 168 261 169 261 170 261 170 262 171 262 171 262 172 262 173 262 173 262 174 262 174 262 175 263 176 263 176 263 177 263 181 252"
stroke="rgb(201,201,201)" fill="rgb(201,201,201)" />
<polygon
points="192 257 191 256 190 256 190 255 189 255 188 255 187 254 187 254 186 254 185 253 184 253 184 253 183 253 182 252 182 252 181 252 177 263 177 263 178 263 178 264 179 264 180 264 180 264 181 265 181 265 182 265 183 265 183 266 184 266 184 266 185 267 186 267 192 257"
stroke="rgb(183,183,183)" fill="rgb(183,183,183)" />
<polygon
points="202 264 201 264 201 263 200 262 199 262 199 261 198 261 197 260 197 260 196 259 195 259 195 258 194 258 193 257 192 257 192 257 186 267 186 267 187 268 187 268 188 268 189 269 189 269 190 270 190 270 191 270 191 271 192 271 192 272 193 272 194 273 194 273 202 264"
stroke="rgb(165,165,165)" fill="rgb(165,165,165)" />
<polygon
points="210 273 209 272 209 272 208 271 208 270 207 270 207 269 206 269 206 268 205 267 205 267 204 266 204 266 203 265 203 265 202 264 194 273 194 273 195 274 195 274 196 275 196 275 197 276 197 276 197 276 198 277 198 277 199 278 199 278 199 279 200 279 200 280 210 273"
stroke="rgb(147,147,147)" fill="rgb(147,147,147)" />
<polygon
points="216 283 216 283 215 282 215 281 215 280 214 280 214 279 213 278 213 278 213 277 212 276 212 276 211 275 211 274 210 273 210 273 200 280 200 280 201 281 201 281 202 282 202 282 202 283 203 284 203 284 203 285 204 285 204 286 204 287 205 287 205 288 205 288 216 283"
stroke="rgb(129,129,129)" fill="rgb(129,129,129)" />
<polygon
points="220 295 220 294 219 294 219 293 219 292 219 291 219 290 218 290 218 289 218 288 218 287 217 287 217 286 217 285 216 284 216 283 205 288 205 289 206 290 206 290 206 291 206 291 206 292 207 292 207 293 207 294 207 294 207 295 208 295 208 296 208 297 208 297 220 295"
stroke="rgb(111,111,111)" fill="rgb(111,111,111)" />
<polygon
points="221 307 221 306 221 305 221 305 221 304 221 303 221 302 221 301 221 301 221 300 220 299 220 298 220 298 220 297 220 296 220 295 208 297 208 298 208 299 208 299 208 300 209 300 209 301 209 302 209 302 209 303 209 304 209 304 209 305 209 306 209 306 209 307 221 307"
stroke="rgb(93,93,93)" fill="rgb(93,93,93)" />
<ellipse cx="164" cy="308" rx="46" ry="46" stroke="rgb(255,206,160)" stroke-linecap="butt"
fill="rgb(255,206,160)" />
<g class="polygon" stroke="rgb(71,71,71)" stroke-width="1" fill="rgb(218,48,160)">
<polygon points="136 367 133 365 130 371 134 372" />
<polygon points="130 364 126 361 123 367 126 369" />
<polygon points="124 360 121 357 117 362 120 364" />
<polygon points="118 355 115 352 111 356 114 359" />
<polygon points="109 344 107 340 102 343 104 347" />
<polygon points="105 337 103 334 98 336 100 340" />
<polygon points="102 331 101 327 95 329 96 332" />
<polygon points="100 324 99 320 93 321 94 325" />
<polygon points="98 309 98 305 92 305 92 309" />
<polygon points="98 302 99 298 93 297 92 301" />
<polygon points="99 294 100 291 94 289 93 293" />
<polygon points="101 287 102 284 97 282 95 285" />
<polygon points="107 274 109 271 104 267 102 271" />
<polygon points="111 268 114 265 109 261 107 264" />
<polygon points="116 262 119 260 115 255 112 258" />
<polygon points="121 257 124 255 121 250 118 253" />
<polygon points="133 249 137 248 134 242 131 244" />
<polygon points="140 246 144 245 142 239 138 241" />
<polygon points="147 244 151 243 150 237 146 238" />
<polygon points="154 243 158 242 158 236 154 237" />
<polygon points="169 242 173 243 173 237 169 236" />
<polygon points="176 243 180 244 181 238 177 237" />
<polygon points="183 245 187 246 189 241 185 239" />
<polygon points="190 248 194 249 196 244 193 242" />
<polygon points="203 255 206 257 209 253 206 250" />
<polygon points="208 260 211 262 215 258 212 255" />
<polygon points="213 265 216 268 220 264 218 261" />
<polygon points="218 271 220 274 225 271 223 267" />
<polygon points="225 284 226 287 232 285 230 282" />
<polygon points="227 291 228 294 234 293 233 289" />
<polygon points="228 298 229 302 235 301 234 297" />
<polygon points="229 305 229 309 235 309 235 305" />
<polygon points="228 319 227 323 233 324 234 320" />
<polygon points="226 326 225 330 231 331 232 328" />
<polygon points="224 333 222 337 227 340 229 336" />
<polygon points="221 340 219 343 224 346 226 343" />
<polygon points="212 352 209 354 214 359 216 356" />
<polygon points="207 356 204 359 208 364 211 361" />
<polygon points="201 361 197 364 201 369 204 366" />
<polygon points="195 365 191 367 194 372 198 370" />
<polygon points="136 367 133 365 130 371 134 372" />
<polygon points="130 364 126 361 123 367 126 369" />
<polygon points="124 360 121 357 117 362 120 364" />
<polygon points="118 355 115 352 111 356 114 359" />
<polygon points="109 344 107 340 102 343 104 347" />
<polygon points="105 337 103 334 98 336 100 340" />
<polygon points="102 331 101 327 95 329 96 332" />
<polygon points="100 324 99 320 93 321 94 325" />
<polygon points="98 309 98 305 92 305 92 309" />
<polygon points="98 302 99 298 93 297 92 301" />
<polygon points="99 294 100 291 94 289 93 293" />
<polygon points="101 287 102 284 97 282 95 285" />
<polygon points="107 274 109 271 104 267 102 271" />
<polygon points="111 268 114 265 109 261 107 264" />
<polygon points="116 262 119 260 115 255 112 258" />
<polygon points="121 257 124 255 121 250 118 253" />
<polygon points="133 249 137 248 134 242 131 244" />
<polygon points="140 246 144 245 142 239 138 241" />
<polygon points="147 244 151 243 150 237 146 238" />
<polygon points="154 243 158 242 158 236 154 237" />
<polygon points="169 242 173 243 173 237 169 236" />
<polygon points="176 243 180 244 181 238 177 237" />
<polygon points="183 245 187 246 189 241 185 239" />
<polygon points="190 248 194 249 196 244 193 242" />
<polygon points="203 255 206 257 209 253 206 250" />
<polygon points="208 260 211 262 215 258 212 255" />
<polygon points="213 265 216 268 220 264 218 261" />
<polygon points="218 271 220 274 225 271 223 267" />
<polygon points="225 284 226 287 232 285 230 282" />
<polygon points="227 291 228 294 234 293 233 289" />
<polygon points="228 298 229 302 235 301 234 297" />
<polygon points="229 305 229 309 235 309 235 305" />
<polygon points="228 319 227 323 233 324 234 320" />
<polygon points="226 326 225 330 231 331 232 328" />
<polygon points="224 333 222 337 227 340 229 336" />
<polygon points="221 340 219 343 224 346 226 343" />
<polygon points="212 352 209 354 214 359 216 356" />
<polygon points="207 356 204 359 208 364 211 361" />
<polygon points="201 361 197 364 201 369 204 366" />
<polygon points="195 365 191 367 194 372 198 370" />
</g>
<g class="polygon" stroke="rgb(218,48,160)" stroke-width="1" fill="rgb(255,0,0)">
<polygon points="144 367 140 366 136 377 140 378" />
<polygon points="115 348 113 344 104 352 106 355" />
<polygon points="102 316 101 312 89 313 90 317" />
<polygon points="106 282 108 278 97 273 96 277" />
<polygon points="129 256 132 253 126 243 122 245" />
<polygon points="162 246 166 246 166 234 162 234" />
<polygon points="195 253 198 256 205 245 201 243" />
<polygon points="219 278 221 282 231 277 230 273" />
<polygon points="226 312 225 316 237 317 238 313" />
<polygon points="214 344 212 348 221 355 223 352" />
<polygon points="187 366 183 367 187 378 191 377" />
<polygon points="144 367 140 366 136 377 140 378" />
<polygon points="115 348 113 344 104 352 106 355" />
<polygon points="102 316 101 312 89 313 90 317" />
<polygon points="106 282 108 278 97 273 96 277" />
<polygon points="129 256 132 253 126 243 122 245" />
<polygon points="162 246 166 246 166 234 162 234" />
<polygon points="195 253 198 256 205 245 201 243" />
<polygon points="219 278 221 282 231 277 230 273" />
<polygon points="226 312 225 316 237 317 238 313" />
<polygon points="214 344 212 348 221 355 223 352" />
<polygon points="187 366 183 367 187 378 191 377" />
</g>
<g class="textgroup" fill="rgb(71,71,71)" stroke="none" font-family="Arial" font-size="14.00pt"
font-weight="bold" text-anchor="start">
<text x="124" y="391">0</text>
<text x="88" y="362">10</text>
<text x="71" y="319">20</text>
<text x="80" y="275">30</text>
<text x="110" y="241">40</text>
<text x="154" y="229">50</text>
<text x="198" y="240">60</text>
<text x="230" y="273">70</text>
<text x="240" y="319">80</text>
<text x="222" y="364">90</text>
<text x="183" y="392">100</text>
</g>
<g fill="rgb(21,21,21)" stroke="none" font-family="Arial" font-size="20.00pt" font-weight="bold"
text-anchor="middle">
<rect x="130" y="359" width="70" height="24" stroke="rgb(255,232,167)" stroke-width="1"
fill="rgb(255,232,167)"></rect>
<text id="GaugeValue" x="165" y="379">6.29</text>
</g>
<g id="needle">
<polygon points="145 355 161 324 152 322 145 355" stroke="rgb(105,105,105)" stroke-width="1"
fill="rgb(160,160,160)" />
<polygon points="146 356 162 325 153 323 146 356" stroke="rgb(105,105,105)" stroke-width="1"
fill="rgb(160,160,160)" />
</g>
<g fill="rgb(0,0,196)" stroke="none" font-family="Tahoma" font-size="9.00pt" text-anchor="middle">
<text id="text_280530371" x="164" y="311">Knob</text>
</g>
</g>
</svg>
I don't think the Math.random() value generation is correct. Try this:
var value = Math.random() * (max - min) + min;
Related
I am trying to make it so when you hover over the div containing an svg, that the svg changes color.
I have a total of 4 svg icons, and 3 of them work, but the second to last svg, for some reason, when I hover over it, does not change color, is it because my svg (below) is made up of multiple elements?
{/* toggle open projects tab */}
<a className="sidebarIcon" href="#">
<svg
className="sidebarSvg"
width="50px"
height="50px"
version="1.0"
viewBox="0 0 168.000000 149.000000"
>
<g
transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
fill="#818181"
stroke="none"
>
<path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
<path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
</g>
</svg>
</a>
Code sandbox link:
https://codesandbox.io/s/cranky-hooks-8hdktn?file=/src/App.js:182-193
remove the fill="#818181remove the fill="#818181remove the fill="#818181remove the fill="#818181
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_selection
i need same effect as in w3school for the svg with path elements.Like when i select somepart of text or complete text. it should with blue background and white font color(text).
<g allowReorder="yes" id="183a1cb2e05_304beff6"><rect x="0" y="0" width="146.9642498517365" height="97.7862442677171" stroke-width="0" fill="#187cdb" opacity="0" id="backgroundRect_183a1cb2e05_304beff6"></rect><path transform="translate(0, 72.93016324118157) scale(0.03561043127010819, -0.03561043127010819)" d="M324 1409L324 997Q324 978 320 875Q438 1052 668 1052Q896 1052 979 899Q1019 825 1019 664L1019 0L851 0L851 643Q851 778 817 828Q759 911 620 911Q495 911 414 834Q351 774 333 677Q324 625 324 483L324 0L156 0L156 1409Z" id="183a1cb2e05_304beff6_path_0" style="pointer-events: none; fill: rgb(0, 0, 0); opacity: 1;"></path><path transform="translate(41.59298372348637, 72.93016324118157) scale(0.03561043127010819, -0.03561043127010819)" d="M1028 1022L1028 111Q1028 -22 1011 -99Q977 -255 865 -332Q742 -418 553 -418Q341 -418 226 -321Q141 -249 124 -116L297 -116Q328 -287 560 -287Q738 -287 806 -186Q862 -101 862 50L862 174Q830 118 800 88Q701 -13 535 -13Q336 -13 211 130Q89 271 89 507Q89 758 219 905Q348 1052 546 1052Q681 1052 775 982Q825 945 872 874L872 1022ZM565 911Q410 911 331 793Q261 688 261 526Q261 299 371 200Q450 129 558 129Q708 129 789 254Q859 362 859 530Q859 739 755 837Q678 911 565 911Z" id="183a1cb2e05_304beff6_path_1" style="pointer-events: none; fill: rgb(0, 0, 0); opacity: 1;"></path><path transform="translate(83.75573434729446, 72.93016324118157) scale(0.03561043127010819, -0.03561043127010819)" d="M581 1414L581 1270Q529 1281 486 1281Q404 1281 379 1247Q359 1221 359 1139L359 1022L554 1022L554 884L359 884L359 0L191 0L191 884L19 884L19 1022L191 1022L191 1089Q191 1189 197 1230Q212 1324 288 1377Q352 1422 465 1422Q514 1422 581 1414Z" id="183a1cb2e05_304beff6_path_2" style="pointer-events: none; fill: rgb(0, 0, 0); opacity: 1;"></path><path transform="translate(105.37126612825014, 72.93016324118157) scale(0.03561043127010819, -0.03561043127010819)" d="M312 1022L312 863Q360 929 398 960Q509 1052 675 1052Q816 1052 908 981Q994 915 1012 794Q1019 751 1019 660L1019 0L851 0L851 601Q851 708 843 751Q829 823 784 861Q724 911 623 911Q490 911 408 827Q350 767 334 669Q324 610 324 495L324 0L156 0L156 1022Z" id="183a1cb2e05_304beff6_path_3" style="pointer-events: none; fill: rgb(0, 0, 0); opacity: 1;"></path></g>
I am trying to show current vaccination-data from a CSV-File provided by local authorities as a progress-bar in style of a syringe.
Depending on the percentage of vaccinated people, the bar should show a part of the syringe-icon in a different color.
I already found this awesome project: https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/
But when trying to add the following code as icon, nothing happens.
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16"><path fill="currentColor" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" class=""></path></svg>
What am i doing wrong?
Easier done with a green path-stroke and pathLength=100
A stroke-dasharray="78 100" then sets percentage
svg {
width: 150px;
}
<script>
function updatePercentage(v = 50) {
document.querySelector("#ceringe").setAttribute("stroke-dasharray", v + " 100");
}
</script>
<input type="range" min="0" max="100" oninput="updatePercentage(this.value)">
<br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path id="ceringe" stroke-dasharray="50 100" pathLength="100" d="M108 403L380 132"
stroke="green" stroke-width="130" />
<path fill="black" d="M510 82 431 2C428-1 423-1 420 2L409 13C406 16 406 21 409 24L437
52 392 97 335 40 318 23C315 20 310 20 307 23L296 34C293 37 293 42 296 45L313 62 85 292
C68 309 59 333 62 357L69 421 2 487C-1 490-1 495 2 498L13 509C16 512 21 512 24 509
L90 443 154 450C178 453 202 445 219 427L446 200 463 217C466 220 471 220 474 217L487 206
C490 203 490 198 487 195L413 121 458 76 486 104C489 107 494 107 497 104L508 93
C511 90 511 85 508 82ZM425 178 198 405C188 415 173 420 159 419L107 402 93 353
C91 338 96 324 107 314L131 290 171 330C174 333 179 333 182 330L193 319C196 316 196
311 193 308L153 268 198 223 238 263C241 266 246 266 249 263L260 252C263 249 263 244
260 241L220 201 265 156 305 196C308 199 313 199 316 196L327 185C330 182 330 177 327
174L289 132 334 87 425 178Z"/>
</svg>
I would recommend adding a clipping mask and then altering the width of the clipping mask with JS based on the values in the CSV file.
This example shows have the icon in green and the full icon in black. If you change 0.5512 to 0.1512, it would be 10% full, etc.
let clipping = document.getElementById("clipping-rectangle")
clipping.width.baseVal.value = 0.5 * 512;
#container {
margin: 20px;
width: 200px;
height: 200px;
}
<div id="container">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16">
<defs>
<clipPath id="clipping">
<rect x="0" y="0" width="800" height="512" id="clipping-rectangle"/>
</clipPath>
</defs>
<path fill="black" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path"/>
<path fill="green" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path-green" clip-path="url(#clipping)"/></svg>
</div>
CSS columns
CSS columns automatically creates the correct number of columns to fit the text (relative to the column-width, column-gap, and element height). Setting thinner columns mean more total columns; setting shorter columns mean more total columns, etc.
See the snippet below, with Swiper.js commented out, for the correct CSS column behavior.
CSS column behavior with Swiper
When a Swiper.js slide contains CSS columns, it doesn't match the slide width to the total number of columns: it begins the second slide after 100% of the swiper-container element width, creating a nasty overlap.
I've tried swiper-slide to width: auto with the slidesPerView: auto option, as described here. Have I missed something else? Or have I hit a limitation of Swiper.js? All tests use the current 5.3.7 version of Swiper.js.
The snippet has Swiper.js commented out to show the correct CSS column behavior; un-comment the HTML & JS to show the problematic Swiper.js result.
// var mySwiper = new Swiper('.swiper-container', {
// direction: 'horizontal',
// slidesPerView: 'auto',
// roundLengths: true,
// mousewheel: {
// enabled: true,
// },
// })
.col-wrapper {
column-fill: auto;
column-width: 150px;
column-gap: 2rem;
height: 100px;
}
.swiper-slide {
width: auto;
}
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#5.3.7/css/swiper.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper#5.3.7/js/swiper.min.js"></script>
-->
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="col-wrapper">
<p class="p-test">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268
269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388
389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448
449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508
509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568
569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628
629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688
689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748
749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808
809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868
869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928
929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988
989 990 991 992 993 994 995 996 997 998 999 1000</p>
</div>
</div>
<div class="swiper-slide">
<div class="col-wrapper">
<p class="p-test">The beginning of slide 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</body>
I have an image like this, divided into 4 segments. I want to be able to change the blur of each segment on hover. For example:
#segment1:hover {
filter: blur(50px);
}
I tried turning those segments into svg masks and then using clip path like in this example this example, but css still interprets it like a whole image even though only a part of it is visible.
The shape of the curves dividing those segments is complex and (I suppose) svg should be used, so javascript tricks for checking x and y position don't work, as well as html < map > tag.
How would you solve such problem? Thank you!
Here's the svg code for the first segment mask (just in case).
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1920.000000pt" height="1081.000000pt" viewBox="0 0 1920.000000 1081.000000"
preserveAspectRatio="xMidYMid meet">
<path transform="translate(0.000000,1081.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none" d="M0 6557 l0 -4254 118 -12 c64 -7 137 -18 162 -23 73 -17 432 -19 530
-3 47 8 124 18 171 24 109 12 305 56 389 86 36 13 88 32 115 41 178 62 184 64
500 247 204 118 404 270 593 451 204 195 424 506 538 758 20 45 46 97 56 113
10 17 18 38 18 48 0 10 12 41 26 69 15 29 35 83 46 121 10 38 27 86 38 107 10
20 24 59 31 86 7 27 24 76 39 109 30 65 68 168 96 255 53 169 121 283 298 499
158 193 340 327 536 393 l95 33 220 -1 220 0 136 -36 c75 -20 179 -55 231 -77
52 -22 153 -57 224 -76 71 -20 143 -40 159 -46 68 -24 166 -48 241 -58 43 -5
121 -16 171 -23 115 -15 205 -4 378 47 180 53 220 70 314 135 312 214 446 443
523 890 15 89 4 313 -28 595 -34 301 -43 630 -21 771 15 89 90 341 131 436 18
41 95 177 159 278 64 100 141 195 251 308 233 239 386 339 746 487 307 126
430 214 538 382 41 63 51 115 52 247 0 84 -6 132 -26 215 -15 58 -27 116 -29
128 -6 61 -160 292 -289 435 l-61 68 -4317 0 -4318 0 0 -4253z"/>
</svg>
Something like this, perhaps:
.x { opacity:0; }
.x:hover { opacity:1; }
<svg width="400" height="300" viewBox="0 0 800 600">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="8"/>
</filter>
<image href="https://i.stack.imgur.com/DkIzu.jpg"
width="800" height="600" id="img"/>
<clipPath id="c1">
<path d="M0 0h400v300h-400z"/>
</clipPath>
<clipPath id="c2">
<path d="M400 0h400v300h-400z"/>
</clipPath>
<clipPath id="c3">
<path d="M0 300h400v300h-400z"/>
</clipPath>
<clipPath id="c4">
<path d="M400 300h400v300h-400z"/>
</clipPath>
</defs>
<use xlink:href="#img"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c1)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c2)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c3)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c4)" class="x"/>
</svg>
This is just a simple example with rectangular clipping masks, but should work with masks of any shape.