Como fazer um velocímetro SVG animado

UMA medidor de calibre é uma ferramenta que indica visualmente um valor dentro de um determinado intervalo. Nos computadores, um “indicador de espaço em disco” usa um medidor de medidor para mostrar quanto espaço em disco é usado do total disponível. Os medidores possuem zonas ou regiões em toda a sua extensão, cada uma diferenciada pela sua própria cor. No desenvolvimento de front-end, podemos usar o Tag HTML5 para exibir dados dentro de um intervalo específico.

Neste post, vamos fazer um Medidor de calibre SVG de forma semi-circular, e animá-lo. Dê uma olhada neste GIF de visualização que mostra como a versão final funcionará no Firefox:

O medidor o intervalo é de 0 a 100, e exibe três zonas iguais em amarelo, azul e vermelho. Você pode alterar o intervalo e o número das zonas de acordo com as suas necessidades.

Para fins de explicação, realizarei cálculos manuais e utilizarei atributos / propriedades SVG embutidos nas etapas a seguir.

Minha demonstração final, no entanto, usa CSS e JavaScript para o cálculo e inserção de propriedades SVG, a fim de torná-lo mais flexível.

1. Desenhe um círculo

Vamos desenhar um círculo simples no SVG. Novo do HTML5 A tag nos permite adicionar o SVG diretamente no código HTML. Dentro de tag, adicionamos o Forma SVG como esta:

Em CSS, vamos adicionar largura e altura propriedades para o wrapper, ambas maiores ou iguais ao diâmetro do círculo (são 300 px em nosso exemplo). Também precisamos definir a largura e a altura do #metro elemento para 100%.

 #wrapper width: 400px; altura: 400 px;  #meter largura: 100%; altura: 100%; 

2. Adicione contorno ao círculo e remova o preenchimento

Com a ajuda do acidente vascular encefálico e largura do traçado Propriedades SVG adicionamos um contorno ao círculo, e usando o fill = "none" propriedade removemos o preenchimento do círculo, bem.

3. cubra apenas metade do círculo

o traço-traço A propriedade SVG cria um contorno tracejado e recebe dois valores, comprimento do traço e comprimento da fenda.

Para o contorno semi-circular, o comprimento do traço valor precisa ser igual à semi-circunferência do círculo, de modo que o traço cubra metade da circunferência do círculo, e comprimento da fenda valor precisa ser igual ou maior que a circunferência restante.

Quando é mais, ele será convertido para a circunferência restante pelo navegador, portanto, usaremos o valor de circunferência total para o comprimento da fenda. Desta forma, podemos evitar o cálculo da circunferência restante.

Vamos ver os cálculos:

$\mathrm{circunferência}=2Ã\; ??\; Â\; ??¢???\pi \times r$

Onde r é o raio. Para um raio de 150, a circunferência é:

$\begin{array}{}\mathrm{circunferência}=2Ã\; ??\; Â\; ??¢???\pi \times \mathrm{150}\\ \mathrm{circunferência}=\mathrm{942,48}\end{array}$

Se dividirmos por 2, obtemos 471,24 para semi-circunferência, então o valor do traço-traço propriedade para um contorno semi-círculo em um círculo de 150 raios é 471, 943. Este semicírculo será usado para denotar a zona de faixa baixa do medidor.

Como você pode ver, está de cabeça para baixo, então vamos aumentar o SVG adicionando o transformar Propriedade CSS com o valor de rotateX (180deg) ao Elemento HTML.

 #meter transform: rotateX (180deg); 

4. Adicione as outras zonas

o zona intermediária (azul) tem que cobrir a parte of do semi-círculo, e ⅔ de 471 é 314. Então, vamos adicionar outro círculo ao nosso SVG usando o traço-traço propriedade novamente, mas agora com o valor de 314 943.

  < /circle>  

o zona final (vermelho) tem que cobrir a última ⅓ parte do semicírculo, e ⅓ de 471 é 157, então vamos adicionar este valor ao traço-traço propriedade do terceiro círculo.

5. Adicione o contorno do medidor

Vamos adicionar um contorno cinza ao medidor para torná-lo melhor. o comprimento do traço do círculo de contorno precisa ser igual à semi-circunferência. Nós colocamos antes de todos os outros círculos no código, para que seja renderizado primeiro pelo navegador, e, portanto, será exibido abaixo dos círculos da região na tela.

o largura do traçado propriedade precisa ser um pouco maior que a dos outros círculos, para dar a aparência de um contorno real.

     < /circle>      

Extremidades de contorno

Como o contorno não cobre as extremidades do semi-círculo, nós também adicionamos 2 linhas de 2px às extremidades adicionando outro círculo com um comprimento do traço de 2px e um comprimento da fenda da semi-circunferência menos 2px. Portanto, o valor do traço-traço propriedade deste círculo é 2, 469.

mascarar

Agora vamos adicionar outro círculo após as zonas de baixa, média e alta faixa. O novo círculo funcionará como uma máscara para ocultar as regiões da zona desnecessárias quando o medidor de medidor for operado.

Suas propriedades serão as mesmas do círculo de contorno e sua cor de traçado também será cinza. A máscara será posteriormente redimensionada com Javascript para revelar as zonas abaixo dela em resposta a um controle deslizante de entrada.

O código combinado até agora é como abaixo.

Se quisermos revelar uma região sob a máscara, precisamos reduzir o tamanho da máscara comprimento do traço. Por exemplo, quando o valor do traço-traço propriedade do círculo de máscara é 157, 943, os arcos permanecerão no seguinte estado:

Então, tudo o que temos a fazer agora é ajustar o traço-traço da máscara usando JavaScript para animação. Mas antes de fazermos isso, como mencionei antes, para minha demonstração final, usei CSS e JavaScript para calcular e adicionar a maioria das propriedades SVG.

Abaixo, você encontra o código HTML, CSS e JavaScript que leva ao mesmo resultado acima.

HTML

Eu adicionei uma imagem de agulha (gauge-needle.svg), um controle deslizante de intervaloinput # slider) para a entrada do usuário e um rótulo (label # lbl) para exibir o valor do controle deslizante no intervalo de 0 a 100.

    0 
 

CSS

O código CSS abaixo adiciona regras de estilo ao SVG, pois as formas SVG podem ser estilizadas da mesma forma que os elementos HTML. Se você quiser ler mais sobre como estilizar SVG com CSS, dê uma olhada neste post. Para estilizar o controle deslizante, confira este post.

 #wrapper position: relative; margem: auto;  #meter largura: 100%; altura: 100%; transform: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; largura do curso: 65;  .range largura do traçado: 60;  #slider, #lbl position: absolute;  #slider cursor: ponteiro; esquerda: 0; margem: auto; direita: 0; topo: 58%; largura: 94%;  #lbl background-color: # 4B4C51; raio de fronteira: 2px; cor branca; font-family: 'correio novo'; tamanho da fonte: 15pt; intensidade da fonte: Negrito; preenchimento: 4 px 4 px 2 px 4 px; direita: -48px; topo: 57%;  #meter_needle altura: 40%; esquerda: 0; margem: auto; posição: absoluta; direita: 0; topo: 10%; transformação-origem: centro inferior; / * correção de orientação * / transform: rotate (270deg); 

JavaScript

No JavaScript, primeiro calculamos e definimos as dimensões do wrapper e de todos os arcos, depois adicionamos o traço-traço valores para os círculos. Depois disso, estaremos vinculando um evento personalizado ao controle deslizante de intervalo para executar a animação.

 / * Defina o raio para todos os círculos * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; para (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

O costume range_change_event () Função

O comportamento do medidor é realizado pelo range_change_event () função personalizada que é responsável pelo ajuste do tamanho da máscara e a animação da agulha.

Leva o valor do slider (entrada do usuário) que está entre 0-100, converte-o para o equivalente da semi-circunferência (meter_value) de um valor entre 471-0 (471 é a semi-circunferência para o raio 150) e define meter_value Enquanto o comprimento do traço da máscara traço-traço propriedade.

o range_change_event () função personalizada também gira a agulha depois de converter a entrada do usuário (chegando na faixa 0-100) ao seu grau equivalente de 0-180.

270 ° é adicionado à rotação da agulha no código acima, porque a imagem que eu usei é de uma agulha vertical e eu tive que girá-la inicialmente 270 ° para que ficasse plana à sua esquerda.

Finalmente, liguei o range_change_event () função para o controle deslizante de intervalo, de modo que o medidor de medidor pode ser operado com ele.

Confira a demonstração ou dê uma olhada no código-fonte em nosso Repositório Github.