SVG绘制图片_SVG JS path实现玫瑰花盛开动画
2018-02-02 14:06:46  By: dwtedx

SVG现在很火,不过是 HTML 还是 Android 都推荐使用 SVG 图片,恰好最近也刚刚研究好怎么在 Android 上使用 SVG。下面呢给大家分享一个 HTML5 的 SVG 动画,一个 SVG 绘制玫瑰花盛开的动画特效,Demo一款 SVG 盛开的花朵动画特效,效果图如下。

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+