用颜色填充云或任何形式(动画)
用颜色填充云或任何形式(动画)
提问于 2019-05-10 17:42:52
我想动画一个从左到右的颜色的svg格式的云图标，不知道如何处理它。
我从插画师导出了云，并将代码粘贴在这里：
<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>
云图标的外观：云图标
你有什么想法吗？后来我想把这个形状填到一个特定的点。这取决于百分比。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-10 19:44:37
在您的代码中，显然是笔画，实际上是一条空隙路径。为了解决这个问题，我删除了云的一半代码(从第二个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>
更新
“任择议定书”正在评论：
你是否也有一个建议，如何用80%的颜色填充云彩？
在这种情况下，悬停时的stroke-dashoffset值应该是20%。在这种情况下，线路的总长度为613。613的20%为: 613 * .2 = 122.6。
在CSS中，将最后一行替换为：
svg:hover line{stroke-dashoffset:122.6;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56082472
复制相关文章
相似问题
腾讯云开发者
