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

Answer 2

这是可能的，但不能只使用＆＃39; fill＆＃39;。

你可以做一个线性渐变填充，有两个停止点，一个是你想要的颜色，另一个是完全透明的颜色。然后为第二个渐变色标的offset设置动画。有关示例，请参阅here。

另一种方法是使用clip-path，其中剪辑形状为rect，例如从左到右进行动画处理。然后可以将其应用于您要填充的形状的副本。基本上你需要起始形状（未填充）和结束形状（填充），通过动画剪辑路径显示最终形状。

从左到右填充svg

2 个答案: