在 SVG 图形中显示百分比 [英] Show Percentage in SVG Graphic

问题描述

我正在尝试将地方当局提供的 CSV 文件中的当前疫苗接种数据显示为注射器样式的进度条.

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.

我已经找到了这个很棒的项目:https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/

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>

我做错了什么?

推荐答案

使用绿色路径笔划和 pathLength=100

A stroke-dasharray=78 100" 然后设置百分比

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>

这篇关于在 SVG 图形中显示百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！