SVG绘制图片_SVG JS path实现玫瑰花盛开动画
程序员文章站
2022-01-19 19:59:20
...
SVG现在很火，不过是 HTML 还是 Android 都推荐使用 SVG 图片，恰好最近也刚刚研究好怎么在 Android 上使用 SVG。下面呢给大家分享一个 HTML5 的 SVG 动画，一个 SVG 绘制玫瑰花盛开的动画特效，Demo一款 SVG 盛开的花朵动画特效，效果图如下。
html代码
<defs>
<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-1" gradientUnits="userSpaceOnUse" cx="113.342" cy="62.644" r="53.882" gradientTransform="matrix(-0.169507, 1.182475, -0.714039, -0.308382, 160.212434, -46.522622)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-4" gradientUnits="userSpaceOnUse" cx="127.727" cy="116.674" r="45.581" gradientTransform="matrix(-0.468422, -1.651974, 0.962071, -0.272798, 74.446964, 391.898588)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-6" gradientUnits="userSpaceOnUse" cx="43.926" cy="85.895" r="44.319" gradientTransform="matrix(1.145876, -0.154456, 0.133585, 0.991037, 18.521778, 10.448842)">
<stop offset="0" style="stop-color: rgb(56, 16, 16);"/>
<stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
</radialGradient>
<radialGradient id="gradient-7" gradientUnits="userSpaceOnUse" cx="70.257" cy="63.907" r="38.537" gradientTransform="matrix(-0.480251, 0.463812, -0.694689, -0.719311, 216.251059, 74.926092)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-8" gradientUnits="userSpaceOnUse" cx="99.231" cy="116.778" r="19.209" gradientTransform="matrix(0.18829, -1.009689, 0.983052, 0.183324, -48.104751, 172.536193)">
<stop offset="0" style="stop-color: rgb(51, 13, 13);"/>
<stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
</radialGradient>
<radialGradient id="gradient-9" gradientUnits="userSpaceOnUse" cx="77.314" cy="119.309" r="20.726" gradientTransform="matrix(-1.623871, -1.229366, 0.603596, -0.79729, 122.245012, 298.564429)">
<stop offset="0" style="stop-color: rgb(115, 42, 42);"/>
<stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
</radialGradient>
<radialGradient id="gradient-10" gradientUnits="userSpaceOnUse" cx="91.275" cy="115.836" r="34.163">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-11" gradientUnits="userSpaceOnUse" cx="87.793" cy="121.847" r="7.864" gradientTransform="matrix(-0.305698, -2.998266, 0.994843, -0.101432, -6.587452, 397.432981)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(95, 30, 30);"/>
</radialGradient>
<radialGradient id="gradient-12" gradientUnits="userSpaceOnUse" cx="77.806" cy="136.077" r="46.618" gradientTransform="matrix(1.007103, 0, 0, 1.028773, 3.509742, -3.183751)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
<radialGradient id="gradient-13" gradientUnits="userSpaceOnUse" cx="34.864" cy="119.976" r="36.699" gradientTransform="matrix(-0.483999, -0.503131, 0.29077, -1.102951, 30.968876, 262.661348)">
<stop offset="0" style="stop-color: rgb(67, 88, 0);"/>
<stop offset="1" style="stop-color: rgb(173, 183, 141);"/>
</radialGradient>
<radialGradient id="gradient-14" gradientUnits="userSpaceOnUse" cx="41.572" cy="155.958" r="37.322" gradientTransform="matrix(0.598359, 0, -0.729427, 1.012048, 147.786285, -2.069081)">
<stop offset="0" style="stop-color: rgb(64, 78, 18);"/>
<stop offset="1" style="stop-color: #758d29"/>
</radialGradient>
<radialGradient id="gradient-15" gradientUnits="userSpaceOnUse" cx="107.613" cy="177.189" r="41.15" gradientTransform="matrix(0.722745, 0, 0, 0.553521, 18.427466, 66.94198)">
<stop offset="0" style="stop-color: rgb(99, 121, 28);"/>
<stop offset="1" style="stop-color: rgb(62, 76, 14);"/>
</radialGradient>
<linearGradient id="gradient-16" gradientUnits="userSpaceOnUse" x1="79.232" y1="148.661" x2="79.232" y2="267.785" gradientTransform="matrix(0.025831, -0.999666, 0.153237, 0.00396, 43.953685, 274.434674)">
<stop offset="0" style="stop-color: #bada55"/>
<stop offset="1" style="stop-color: rgb(59, 72, 14);"/>
</linearGradient>
<radialGradient id="gradient-2" gradientUnits="userSpaceOnUse" cx="33.089" cy="83.922" r="27.475" gradientTransform="matrix(0.758528, 1.916342, -0.693287, 0.585241, 83.304087, -39.360742)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
</defs>
js代码
var svg = document.getElementById(´svg´);
var animation0 = document.getElementById(´animate0´);
svg.addEventListener(´mouseenter´, function(){ animation0.beginElement(); });
var animation1 = document.getElementById(´animate1´);
svg.addEventListener(´mouseenter´, function(){ animation1.beginElement(); });
var animation2 = document.getElementById(´animate2´);
svg.addEventListener(´mouseenter´, function(){ animation2.beginElement(); });
var animation3 = document.getElementById(´animate3´);
svg.addEventListener(´mouseenter´, function(){ animation3.beginElement(); });
var animation4 = document.getElementById(´animate4´);
svg.addEventListener(´mouseenter´, function(){ animation4.beginElement(); });
var animation5 = document.getElementById(´animate5´);
svg.addEventListener(´mouseenter´, function(){ animation5.beginElement(); });
var animation6 = document.getElementById(´animate6´);
svg.addEventListener(´mouseenter´, function(){ animation6.beginElement(); });
var animation7 = document.getElementById(´animate7´);
svg.addEventListener(´mouseenter´, function(){ animation7.beginElement(); });
var animation8 = document.getElementById(´animate8´);
svg.addEventListener(´mouseenter´, function(){ animation8.beginElement(); });
var animation9 = document.getElementById(´animate9´);
svg.addEventListener(´mouseenter´, function(){ animation9.beginElement(); });
var animation10 = document.getElementById(´animate10´);
svg.addEventListener(´mouseenter´, function(){ animation10.beginElement(); });
var animation11 = document.getElementById(´animate11´);
svg.addEventListener(´mouseenter´, function(){ animation11.beginElement(); });
var animation12 = document.getElementById(´animate12´);
svg.addEventListener(´mouseenter´, function(){ animation12.beginElement(); });
var animation13 = document.getElementById(´animate13´);
svg.addEventListener(´mouseenter´, function(){ animation13.beginElement(); });
var animation14 = document.getElementById(´animate14´);
svg.addEventListener(´mouseenter´, function(){ animation14.beginElement(); });
以上是部分代码、更多代码可以下载源代码查看、下面是Demo的下载地址
SVG JS path实现玫瑰花动画源代码下载链接: HTML5 SVG绘图 密码: 31nv