можно ли сделать цвет заполнения круга SVG снизу вверх на основе процента? [дубликат]

этот вопрос уже есть ответ здесь:

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

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

</svg>

Как заполнить круг, как показано ниже на основе процент!!

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

спасибо заранее.

6
circle svg svg-animate svg-filters

2 ответов

для этого можно использовать градиент со стоп-непрозрачностью. вы бы добавили две" средние " остановки с непрозрачностью 0 и 1 соответственно, установив смещение обоих в нужный вам процент.

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

вы даже можете оживить его

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

преимущество в том, что это работает на любой форме и размере без изменения градиента

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

самый простой способ сделать это-создать маску с круглым отверстием в ней, а затем оживить прямоугольник позади нее. Например:

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

данные пути здесь начинаются с квадратной коробки шириной 200 единиц (M0 0 200 0 200 200 0 200Z), а затем использует две дуги, чтобы нарисовать круг диаметром 80 единиц внутри него (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). The evenodd правило заполнения гарантирует, что круг вырезан из квадрата.

если вы хотите, чтобы круг заполнялся снизу вверх, вам придется использовать rotate трансформация:

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

это вращает систему координат вокруг середины изображения SVG, так что прямая линия растет вверх, когда вы увеличиваете ее высоту. Здесь я использую переход CSS для изменения высоты прямой кишки при наведении на нее. Но вы можете использовать Javascript или JQuery, чтобы изменить высоту на то, что вы хотите.

вот пример:

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