css - SVG 填充路径动画
问题描述
我有一条带箭头的路径,我想做一个从左到右的颜色过渡动画。
我已经为线和箭头做了这个,但它似乎不同步。我希望线条和箭头无缝过渡到两种颜色。
这是小提琴:https ://jsfiddle.net/afonsolfm/6ojwrksd/ 。
HTML
<svg>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="green">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<linearGradient id="left-to-right-arrow">
<stop offset="0" stop-color="green">
<animate begin="2s" dur="1s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
<path d="M -5 5, 0 0.3, -5 -5"></path>
</marker>
</defs>
<path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</svg>
CSS
svg {
width: 600px;
height: 300px;
border: 1px solid green;
}
path {
fill: transparent;
}
.line {
marker-end: url(#arrow-head);
stroke: url(#left-to-right);
stroke-width: 10px;
}
#arrow-head {
stroke: url(#left-to-right-arrow);
}
解决方案
另一种方法是将渐变动画放在矩形上,然后将箭头用作遮罩。
svg {
width: 600px;
height: 300px;
border: 1px solid green;
}
path {
fill: transparent;
}
.line {
marker-end: url(#arrow-head);
stroke: white;
stroke-width: 10px;
}
#arrow-head {
stroke: white;
}
#masked-rect {
fill: url(#left-to-right);
mask: url(#arrow-mask);
}
<svg>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="green">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="blue">
<animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
<marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
<path d="M -5 5, 0 0.3, -5 -5"></path>
</marker>
<mask id="arrow-mask">
<path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</mask>
</defs>
<rect id="masked-rect" width="100%" height="100%"/>
</svg>
推荐阅读
- nginx - Nginx 通过 varnish 服务器通过公共 IP 访问它时返回 404
- r - MLE 在 R 中使用 nlminb - 理解/调试某些错误
- javascript - 我正在编写井字游戏并为输入 X 或 O 添加点击事件,但输入后我想删除点击事件
- html - 如何在html上使用图标
- javascript - Node.js express、mysql 和非阻塞行为
- docker - 如何将密码从 docker-compose.yml 中移开
- reactjs - Google 登录:不是客户端的有效来源:http://localhost:3000 尚未被列入客户端 ID XXXXXXXXXXXX 的白名单
- python-3.x - Cython 循环优化 | Python 循环 => Cython 循环
- string - 如何从字符串中获取特定值
- c - 如何使用C中的结构数组从文件中打印已排序的行