è possibile rendere il colore di riempimento del cerchio SVG dal basso verso l'alto in base alla percentuale?

Question

<svg viewbox="-20 -20 100 100"> 

    <circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2"> 

</svg> 

Come riempire il cerchio come indicato in base alla percentuale !!

http://i.stack.imgur.com/gVAN5.png

Grazie in anticipo.

Answer 1

si potrebbe usare un gradiente con stop-opacità per fare questo. aggiungerei due stop "intermedi" con opacità 0 e 1 rispettivamente e impostare l'offset di entrambi alla percentuale desiderata.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> 
 
    <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
     <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
     <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> 
 
     <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> 
 
     <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
    </linearGradient> 
 
    <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
</svg>

si potrebbe anche animare

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> 
 
     <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
 
      </stop> 
 
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
 
      </stop> 
 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
     </linearGradient> 
 
     <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
</svg>

il vantaggio è che questo funziona su qualsiasi forma e dimensione senza cambiare il gradiente

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="400" height="200"> 
 
     <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
 
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> 
 
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> 
 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
 
     </linearGradient> 
 
     <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <circle cx="250" cy="150" r="145" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <rect x="400" y="20" width="100" height="100" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    <path d="M50 150L95 290 h-90z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 

 
    <path d="M450 205 A45 45 0 0 1 450 295A100 100 0 0 0 450 205z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
 
    </svg>

Answer 2

Il modo più semplice per eseguire questa operazione è creare una maschera con un buco circolare e quindi animare un rettangolo dietro di esso. Ad esempio:

<path fill="#fff" fill-rule="evenodd" 
     d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/> 

I dati del percorso qui inizia con una scatola quadrata larga 200 unità (M0 0 200 0 200 200 0 200Z) e quindi utilizza due archi per disegnare un cerchio di diametro 80 unità al suo interno (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). La regola di riempimento evenodd assicura che il cerchio venga ritagliato dal quadrato.

Se si desidera che il cerchio di riempire dal basso in alto, allora si dovrà utilizzare un rotate trasformazione:

<rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/> 

Questo fa girare il sistema di coordinate intorno al centro dell'immagine SVG in modo che il rect cresce verso l'alto quando aumenti la sua altezza. Qui, sto usando una transizione CSS per cambiare l'altezza del rect quando passi il mouse su di esso. Ma puoi usare Javascript o JQuery per modificare l'altezza in base alle tue esigenze.

Ecco un esempio di lavoro:

svg #fillup { height:0px; transition:height 0.5s; } 
 
svg:hover #fillup { height:160px; }

<svg width="200" height="200" viewBox="0 0 200 200"> 
 
    <rect x="10" y="10" width="180" height="180" fill="#eee"/> 
 
    <rect transform="rotate(180 100 100)" x="20" y="20" 
 
     width="160" height="0" fill="#47f" id="fillup"/> 
 
    <path fill="#fff" fill-rule="evenodd" 
 
     d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 
 
      180 100 80 80 0 0 0 20 100Z"/> 
 
    <circle cx="100" cy="100" r="90" fill="none" stroke="#888" 
 
      stroke-width="20"/> 
 
    <circle cx="100" cy="100" r="99" fill="none" stroke="#333" 
 
      stroke-width="1"/> 
 
    <circle cx="100" cy="100" r="80" fill="none" stroke="#333" 
 
      stroke-width="1"/> 
 
</svg>