javascript - Slow change two SVG, -
why beginelement(); not work in firefox?
demo https://jsfiddle.net/zpo2n8uf/8/
the initial decision http://jsfiddle.net/zpo2n8uf/3/ not come fact icon clicked rapid flashing
var svganim = $('.fox_btn svg animate'); var playobj = { from: 'm11,10 l17,10 17,26 11,26 m20,10 l26,10 26,26 20,26', to: 'm11,10 l18,13.74 18,22.28 11,26 m18,13.74 l26,18 26,18 18,22.28', dur: '0.2s', keysplines: '.4 0 1 1', repeatcount: 1 }; var pausobj = { from: 'm11,10 l18,13.74 18,22.28 11,26 m18,13.74 l26,18 26,18 18,22.28', to: 'm11,10 l17,10 17,26 11,26 m20,10 l26,10 26,26 20,26', dur: '0.2s', keysplines: '.4 0 1 1', repeatcount: 1 }; $('.fox_btn').on('click', function() { if($(this).hasclass('play')) { svganim.attr(pausobj).get(0).beginelement(); } else { svganim.attr(playobj).get(0).beginelement(); } $(this).toggleclass('play'); });
.fox_btn { background: transparent; width: 186px; height: 186px; } body { background: #000; } .fox-svg-shadow { stroke: rgba(0,0,0,.15); stroke-width: 2px; fill: none; } .fox-svg-fill { fill: #fff; -webkit-transition: 325ms ease; -moz-transition: 325ms ease; -ms-transition: 325ms ease; -o-transition: 325ms ease; transition: 325ms ease; } .fox_btn:hover .fox-svg-fill { fill: #ffbf2c; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fox_btn play"> <svg width="100%" height="100%" viewbox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="fox-play-svg" d="m 11 10 l 18 13.74 l 18 22.28 l 11 26 m 18 13.74 l 26 18 l 26 18 l 18 22.28"> <animate attributetype="xml" attributename="d" fill="freeze"></animate> </path> </defs> <use xlink:href="#fox-play-svg" class="fox-svg-shadow"></use> <use xlink:href="#fox-play-svg" class="fox-svg-fill"></use> </svg> </div>
Comments
Post a Comment