时间戳

首页 > 解决方案 > 用颜色填充云或任何形式（动画）

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

问题描述

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

我从 illustrator 中导出了云并将代码粘贴到此处：

<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>
<path d="M89.8,206.1a108.63,108.63,0,0,0-84.3,106c0,50.9,36.7,94.8,84.3,105.7Z" transform="translate(-0.01 -0.01)" style="fill:#009285"/>
<path 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.4ZM297,12.6c-49,0-95.3,19.3-130.5,54.3S112,148,112,196.7v13.1l-3.2.3c-54.8,5.8-96.1,51-96.1,105.1,0,57,48.4,105.1,105.6,105.1H465.8c75.9,0,135.4-59.2,135.4-134.7,0-71-52.4-129-121.8-134.7l-2.5-.2-.7-2.4C454.6,68.4,380.9,12.6,297,12.6Z" transform="translate(-0.01 -0.01)" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:10.975500106811523px"/>
</svg>

云图标的外观：云图标

你有什么想法？稍后我想将形状填充到某个点。这取决于百分比值。

标签： htmlcssanimationsvg

解决方案

显然是您的代码中的笔划，实际上是一条中空的路径。为了解决这个问题，我删除了云的一半代码（从第二个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;}

推荐阅读