如何显示淡入的svg元素?
Posted
技术标签:
【中文标题】如何显示淡入的svg元素?【英文标题】:How to show an svg element with an fade in? 【发布时间】:2021-04-01 14:12:40 【问题描述】:我有一个 svg 元素。如何从左到右逐渐显示(像动画一样)?
【问题讨论】:
【参考方案1】:您可以像这样使用 jQuery animate() 为 SVG clipPath 制作动画:
$("#cut-off-bottom rect").animate(width: "100%", duration:4000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<clipPath id="cut-off-bottom">
<rect x="0" y="0" />
</clipPath>
<path fill="#0099ff" fill-opacity="1" clip-path="url(#cut-off-bottom)" d="M0,32L48,32C96,32,192,32,288,58.7C384,85,480,139,576,154.7C672,171,768,149,864,165.3C960,181,1056,235,1152,240C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
【讨论】:
【参考方案2】:您可以使用 CSS @keyframes。
@keyframes stretchInFromLeft
0%
width: 100%;
100%
width: 0;
img
max-width: 100%;
width: 100%;
.wrapper
position: relative;
.overlay
animation: 1s ease-out 0s 1 stretchInFromLeft;
position: absolute;
top: 0;
right: 0;
background: #fff;
width: 0;
height: 100%;
<div class="wrapper">
<img src="https://i.stack.imgur.com/dta2g.jpg" />
<div class="overlay"></div>
</div>
小提琴:https://jsfiddle.net/r034wcgp/1/
来源:css3 transition animation on load?
【讨论】:
好的。我有另一个问题。如何从头开始动画?它不是从起点开始的以上是关于如何显示淡入的svg元素?的主要内容,如果未能解决你的问题,请参考以下文章