如何使用css在svg中添加从下到上流动的颜色
Posted
技术标签:
【中文标题】如何使用css在svg中添加从下到上流动的颜色【英文标题】：How to add color flowing from bottom to top in svg using css 【发布时间】：2021-12-05 11:29:49 【问题描述】：我是一个新手 SVG 动画师，我正在尝试为我的网站制作徽标，我在 Figma 中制作了四个矩形，它们都有不同的路径。所以我试图用从最底部的矩形到最顶部的平滑过渡来填充矩形，我希望颜色像从最底部到最顶部的颜色一样填充，进一步我想要不同的颜色每个矩形，所以谁能帮帮我。
*
padding: 0%;
margin: 0%;
box-sizing: border-box;
body
width: 100%;
height: 100%;
background-color: rgb(32,35,48);
#logo
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50px, -50px);
animation: line-fill 5s ease forwards 1.2s;
#logo path:nth-child(1)
stroke-dasharray: 680px;
stroke-dashoffset: 680px;
animation: line-anim 2s ease forwards 0.2s;
#logo path:nth-child(2)
stroke-dasharray: 680px;
stroke-dashoffset: 680px;
animation: line-anim 2s ease forwards 0.4s;
#logo path:nth-child(3)
stroke-dasharray: 680px;
stroke-dashoffset: 680px;
animation: line-anim 2s ease forwards 0.6s;
#logo path:nth-child(4)
stroke-dasharray: 680px;
stroke-dashoffset: 680px;
animation: line-anim 2s ease forwards 0.8s;
@keyframes line-anim
to
stroke-dashoffset: 0;
@keyframes line-fill
from
fill: transparent;
to
fill: white;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<svg id="logo" viewBox="0 0 291 282" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 225.5H2.5V228V277V279.5H5H286H288.5V277V228V225.5H286H5Z" stroke="white" stroke-/>
<path d="M5 2.5H2.5V5V54V56.5H5H286H288.5V54V5V2.5H286H5Z" stroke="white" stroke-/>
<path d="M5 76.5H2.5V79V128V130.5H5H286H288.5V128V79V76.5H286H5Z" stroke="white" stroke-/>
<path d="M5 150.5H2.5V153V202V204.5H5H286H288.5V202V153V150.5H286H5Z" stroke="white" stroke-/>
</svg>
<script type="text/javascript" src="app.js"></script>
</body>
</html>【问题讨论】：
您的意思是每个块依次过渡以逐渐获得更多色彩饱和度，例如从浅蓝色开始并以纯深蓝色结束吗？或者您的意思是用浅蓝色的渐变填充每个块从底部到顶部为深蓝色，底部为浅绿色，顶部为深绿色等。 这就是我的真正意思，我希望颜色在底部饱和度较低，在顶部饱和度最高，您在底部浅蓝色和深蓝色纯色示例中完全正确在顶部，这会让人感觉颜色实际上是从一个块移动到另一个块。 【参考方案1】：您可以使用此方法来实现 SVG 的颜色流：
<svg>
<rect >
<animate attributeName="fill" dur="5s" values="pink;purple;pink" repeatCount="indefinite" />
</rect>
</svg>【讨论】：
这不适用于我的代码，我完全是菜鸟，抱歉。以上是关于如何使用css在svg中添加从下到上流动的颜色的主要内容，如果未能解决你的问题，请参考以下文章