Заполнить svg слева направо

Question

Я новичок в svg, я пытался заполнить цвет по пути/кругу. Я смог заполнить его переходом.

Но мне было интересно, есть ли способ заполнить svg слева направо от пути/круга.

SVG

<svg viewBox="0 0 160 160" width="160" height="160"> 
    <circle cx="80" cy="80" r="50" /> 
</svg> 

CSS

circle { 
    transition: all 3s; 
} 

JS

setTimeout(function(){ 
    $('circle').css('fill', 'red'); 
},300); 

Как заполнять определенном направлении, как слева направо?

Codepen

Answer 1

Как "заливка слева направо" может означать много вещей, я сделал несколько примеров:

Moving градиент:

Я предложил бы использовать SVG <linearGradient> и <animate> теги. Таким образом, вам не нужны JS или CSS.

Вот руководство по анимации градиенты в SVG: http://designmodo.com/animate-svg-gradients/ и один SVG анимации в целом: https://css-tricks.com/guide-svg-animations-smil/

В вашем случае (заливка слева направо), я хотел бы сделать это следующим образом:

<svg viewBox="0 0 160 160" width="160" height="160"> 
    <defs> 
     <linearGradient id="lightGradient"> 
      <stop offset="0%" stop-color="red"> 
       <animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" /> 
      </stop> 
      <stop offset="100%" stop-color="black"> 
       <animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" begin="3s"/> 
      </stop> 
     </linearGradient> 
    </defs> 
    <circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/> 
</svg> 

Технически это обман, так как градиент фактически не перемещается, но цвета с обеих сторон меняются, но он выглядит почти так же. Он начинается с градиента от черного до черного, затем левая сторона изменяется на красный, что дает иллюзию, что красный цвет движется слева. После того, как левая сторона красная, правая сторона меняется от черного к красному, и похоже, что градиент перемещается, чтобы заполнить весь круг.

чёткая граница между левой и правой:

Вероятно, лучше всего использовать <clip-path> для этого:

<clipPath id="left-to-right"> 
    <rect x="130" y="30" width="0" height="100" > 
     <animate attributeName="width" values="0;100" dur="3s" fill="freeze"/> 
    </rect> 
</clipPath> 
... 
<circle cx="180" cy="80" r="50" fill="black"/> 
<circle cx="180" cy="80" r="50" fill="red" clip-path="url(#left-to-right)"/> 

Это один рисует черный круг, а затем рисует красный круг над ним внутри взросления отсечения.

Один круг заслоняя другой:

Опять <clip-path> работает для этого:

<clipPath id="steady"> 
    <circle cx="280" cy="80" r="50"/> 
</clipPath> 
... 
<circle cx="280" cy="80" r="50" fill="red" clip-path="url(#steady)"> 
    <animate attributeName="cx" values="180;280" dur="3s" fill="freeze"/> 
</circle> 

Это один использует круговую область подрезки и перемещает второй круг внутри него.

Здесь в Codepen: http://codepen.io/anon/pen/aOKeYQ

Answer 2

Это возможно, но не только с помощью «заливки».

Вы можете, например, выполнить заливку линейного градиента, с двумя остановками, причем один из них является цветом, который вы хотите, а другой полностью прозрачным. Затем анимируйте offset второго упора градиента. Для примера см. here.

Другой способ - использовать clip-path, где форма клипа представляет собой анимированный rect, например, слева направо. Затем это можно применить к копии формы, которую вы хотите заполнить так. В основном вам нужна начальная форма (незаполненная) и конечная форма (заполненная), где финальная фигура отображается при анимации клипа.