Question

我想为svg格式的云图标设置动画，其颜色从左到右，不知道如何处理。

我从插画家导出了云，并将代码粘贴到这里：

    user_id article_id  date_saved
0   1   2579244390  2019-05-09 10:46:23
1   1   2580336884  2019-05-09 10:46:22
3   1   2450784233  2019-01-11 12:36:44

“云”图标的外观：Cloud Icon

您有什么想法吗？稍后，我想将形状填充到特定点。这取决于百分比值。

Answer 1

您的代码中显然是笔画，实际上是一条空路。为了解决此问题，我删除了一半的云代码（从第二个M命令到末尾）。现在，您可以填充路径，也可以将其用作<clipPath>

至于动画，有很多方法可以实现。例如，您可以转换用云路径剪切的线的stroke-dashoffset。

请将鼠标悬停在svg元素上以查看动画。

  path {
          fill:transparent;
          stroke:#f00;
          stroke-miterlimit:10;
          stroke-width:10.975500106811523px;
  
        }
  line{
          stroke-dasharray:613;
          stroke-dashoffset:613;
          transition:stroke-dashoffset 2s
        }
        
  svg:hover line{stroke-dashoffset:0;}

<svg id="cloud-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613.78 432.88">
<title>wolke-10</title>
<clipPath id="clip">
<use xlink:href="#cloud"/>
</clipPath>  
  
<line y1="216.5"  y2="216.5" x2="613" stroke="skyBlue" stroke-width="425" clip-path="url(#clip)"/>
  
  
  <path id="cloud" d="M465.7,427.4H118.3C57.1,427.4,5.5,376,5.5,315.2,5.5,258.5,48,211,104.8,203.4v-6.7c0-50.6,20.1-98.5,56.6-134.9S246.1,5.5,297,5.5c86.4,0,162.3,56.8,185.4,138.5,71.9,7.2,125.9,67.7,125.9,141.6C608.3,365.1,545.7,427.4,465.7,427.4Z" transform="translate(-0.01 -0.01)" />
</svg>

更新

OP正在评论：

您还有建议如何用80％的颜色填充云

在这种情况下，悬停时stroke-dashoffset的值应为20％。在这种情况下，该行的总长度为613。613的20％为：613 * .2 = 122.6。

在CSS中，用以下内容替换最后一行：

svg:hover line{stroke-dashoffset:122.6;}

用颜色（动画）填充云或任何形式

1 个答案:

更新