czy można ustawić kolor wypełnienia koła SVG od dołu do góry na podstawie wartości procentowej?

Question

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

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

</svg> 

Jak wypełnić okrąg jak poniżej w oparciu o procent !!

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

góry dzięki.

Answer 1

można użyć gradientu ze stop-kryciem, aby to zrobić. należy dodać dwa "środkowe" przystanki z kryciem 0 i 1 odpowiednio, ustawić przesunięcie obu do procentu, którego potrzebujesz.

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

można nawet ożywić to

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

zaletą jest to, że działa na dowolnym kształcie i rozmiarze, bez zmiany gradientu

<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

Najprostszym sposobem wykonania tej czynności jest utworzenie maski z okrągłym otworem, a następnie animacja prostokąta za nią. Np

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

Dane ścieżka tu rozpoczyna się kwadrat szeroki 200 jednostek (M0 0 200 0 200 200 0 200Z), a następnie wykorzystuje dwa łuki zwrócić okrąg o średnicy 80 jednostek wewnątrz niego (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). Reguła wypełnienia evenodd zapewnia wycięcie koła z kwadratu.

Jeśli chcesz krąg wypełnić od dołu do góry, a następnie będziesz musiał użyć rotate Transformacja:

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

Ten układ współrzędnych obraca się wokół środkowej części obrazu SVG tak że rect rośnie, gdy zwiększasz jego wysokość. Tutaj używam przejścia CSS, aby zmienić wysokość prostokąta po najechaniu na niego kursorem myszy. Ale możesz użyć Javascript lub JQuery, aby zmienić wysokość na dowolną.

Oto przykład praca:

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>