$.prototype.animatePathD = function(d, o) {
// Подстраиваем под разные браузера
var i = $('body *').length;
$('body').append('<svg id="animatepathd' + i + '" style="display:none"><path d="' + d + '"></svg>');
d = $('#animatepathd' + i + ' path').attr('d');
$('#animatepathd' + i).remove();
var e = this,
d = {
primary: {
frame: $(e).attr('d').replace(/\ \-[0-9.]+/g, ' {n}').replace(/[0-9.]+/g, '{n}'),
coord: $(e).attr('d').replace(/[^0-9-.]+/g, ',').replace(/([0-9.]+)\-([0-9.]+)/g, '$1,$2').replace(/^\,(.+)\,$/, '$1').split(',')
},
final: {
frame: d.replace(/\ \-[0-9.]+/g, ' {n}').replace(/[0-9.]+/g, '{n}'),
coord: d.replace(/[^0-9-.]+/g, ',').replace(/([0-9.]+)\-([0-9.]+)/g, '$1,$2').replace(/^\,(.+)\,$/, '$1').split(',')
}
},
opt = o;
if (opt == undefined) {
opt = {
duration: 1000,
easing: 'linear'
};
} else if (/^\d+$/.exec(opt) != null) {
opt = {
duration: opt,
easing: 'linear'
};
if (opt.duration == undefined || /^\d+$/.exec(opt.duration) == null) {
opt.duration = 1000
};
} else {
if (opt.duration == undefined || /^\d+$/.exec(opt.duration) == null) {
opt.duration = 1000
};
if (opt.easing != 'swing' && opt.easing != 'linear') {
opt.easing = 'linear'
};
};
if (d.primary.frame == d.final.frame) {
var funPoint = {
primary: {},
final: {},
list: '',
frame: "'" + d.final.frame + "'"
};
for (var i = 0; i < d.primary.coord.length; i++) {
funPoint.primary['c' + i] = d.primary.coord[i];
funPoint.final['c' + i] = d.final.coord[i];
funPoint.list = ', c' + i;
if (d.primary.coord.length != 0) {
funPoint.frame = funPoint.frame.replace(/\{n\}/, "'+obj.elem.c" + i + "+'")
} else {
funPoint.frame = funPoint.frame.replace(/\{n\}/, "'+c" + i + "+'")
};
};
funPoint.list = funPoint.list.replace(/^\,\ (.+)$/, '$1');
$(funPoint.primary).animate(funPoint.final, {
duration: opt.duration,
easing: opt.easing,
step: function(c0, obj) {
$(e).attr('d', eval(funPoint.frame));
}
});
} else {
console.error('Frameworks coordinates do not match!');
};
};
$(function() {
$('#button').click(function() {
if ($('#button.-pause').length == 1 && $('#button.-play').length == 0) {
$('#button svg path').animatePathD('M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z', {
duration: 150,
easing: 'linear'
});
$('#button').removeClass('-pause');
$('#button').addClass('-play');
} else {
$('#button svg path').animatePathD('M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z', 150);
$('#button').removeClass('-play');
$('#button').addClass('-pause');
};
return false;
});
});
@import url('data:text/css;charset=UTF-8,body { font-family: Tahoma, sans-serif; font-size: 0.8rem; } a {display: inline-block;color: #427fed;cursor: pointer;text-decoration: none;margin-right:5px;} a:hover {text-decoration: underline;} button { -webkit-padding-end: 10px; -webkit-padding-start: 10px; min-height: 2em; min-width: 4em; padding-bottom: 1px; -webkit-appearance: none; -webkit-user-select: none; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #444; font: inherit; margin: 0 1px 0 0; outline: none; text-shadow: 0 1px 0 rgb(240, 240, 240); } button:hover { background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: black; } button:active { background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); box-shadow: none; text-shadow: none; } button:focus { -webkit-transition: border-color 200ms; border-color: rgb(77, 144, 254); outline: none; } select { -webkit-padding-end: 20px; -webkit-padding-start: 6px; background-position: right center; background-repeat: no-repeat; min-height: 2em; min-width: 4em; padding-bottom: 0; -webkit-user-select: none; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #444; font: inherit; margin: 0 1px 0 0; outline: none; text-shadow: 0 1px 0 rgb(240, 240, 240); } select:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQ%E2%80%A6BbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: black; } select:active { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQ%E2%80%A6BbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); box-shadow: none; text-shadow: none; } select:focus { -webkit-transition: border-color 200ms; border-color: rgb(77, 144, 254); outline: none; }');
#button {
min-width: auto;
padding: 3px 3px 0 1px;
cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<button id="button" class="-pause">
<svg width="36" height="36" viewBox="0 0 36 36">
<path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
</button>