SVG daire dolgu rengini, yüzdeye göre aşağıdan yukarıya doğru yapmak mümkün mü?

Question

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

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

</svg> 

Aşağıdaki şekilde yüzdeyi aşağıdaki yüzdeye göre nasıl doldurulur !! peşin

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

teşekkürler.

Answer 1

bunu yapmak dur-donukluk ile bir gradyan kullanabilirsiniz:

İşte çalışan bir örnek. , sırasıyla 0 ve 1 opaklığı olan iki "orta" durağı ekleyiniz ve gerek duyduğunuz yüzdeyle her ikisinin de ofsetini ayarlayabilirsiniz.

<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>

hatta o

<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>

avantajı bu gradyan

değiştirmeden herhangi bir şekil ve boyutuna çalışmasıdır animasyon olabilir alıngan ossifrage cevaplanması için

<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

Bunu yapmanın en kolay yolu, içinde dairesel delik bulunan bir maske oluşturmak ve arkasındaki bir dikdörtgeni canlandırmaktır. Örnek: burada

<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"/> 

yol verileri 200 adet geniş bir kare kutu (M0 0 200 0 200 200 0 200Z) ile başlar ve daha sonra (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z) iç çapı, 80 adet daire çizmek için iki yay kullanır. evenodd doldurma kuralı, dairenin kareden kesilmesini sağlar. Eğer alttan üste doldurmak için daireyi isterseniz

, o zaman bir rotate dönüşümü kullanmak gerekecektir: Bu SVG görüntüsünün ortalarında koordinat sistemini spin

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

böylece rect yüksekliğini artırdığınızda yukarı doğru büyür. Burada, üzerine geldiğinizde rect'in yüksekliğini değiştirmek için bir CSS geçişi kullanıyorum. Ama ne istersen boyunu değiştirmek için Javascript'i veya JQuery'yi kullanabilirsiniz.

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>