从左到右填充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

由于"从左到右填充"可能意味着很多事情,我举了几个例子:

移动渐变:

我建议使用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