{"id":292196,"date":"2019-07-17T15:01:45","date_gmt":"2019-07-17T15:01:45","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=292196"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=292196","title":{"rendered":"SVG \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 Vue.js"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u0423\u0447\u0443\u0441\u044c \u043d\u0430 front-end, \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u0432 \u0443\u0447\u0435\u0431\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e SPA \u043d\u0430 Vue.js \u0434\u043b\u044f back-end, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0431\u043e\u0442\u0430. \u0411\u043e\u0442 \u043d\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0442 0 \u0434\u043e 500 \u0437\u0430\u043f\u0438\u0441\u0435\u0439, \u0438 \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0445: \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c, \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0438 back-end \u043d\u0438 \u0431\u043e\u0442, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u0430 \u0432\u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u0430, \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 500 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043e\u0442 10 \u0434\u043e 40 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043d\u0430\u0447\u0430\u043b\u0443, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0441\u043f\u0438\u043d\u0435\u0440, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u044b\u0441\u043a\u0430\u043b \u0431\u043e\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e % \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0446\u0438\u0444\u0440\u0430\u043c\u0438 \u2014 \u0441\u043a\u043e\u043b\u044c\u043a\u043e % \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e<\/li>\n<li>\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043c \u2014 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438<\/li>\n<li>\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u2014 % \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e \u043c\u0435\u0440\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0431\u043b\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044f \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-o\/wr\/mc\/-owrmchonzxft0kpoabdeumz2tm.gif\"\/>  <\/p>\n<p>\u2026 \u043f\u043e-\u043c\u043e\u0435\u043c\u0443, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u0431\u0430\u0432\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u043b\u0441\u044f \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c. \u0413\u0440\u0430\u0444\u0438\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044f \u0434\u043e \u0441\u0435\u043b\u0435 \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438\u043d\u0435\u0441\u043b\u0430 \u043c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435, \u043d\u043e \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 SVG \u0438 Vue.<\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0412\u044b\u0431\u043e\u0440 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 Canvas \u0438\u043b\u0438 SVG<\/h3>\n<p>  <\/p>\n<p><em>Canvas<\/em> \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u0433\u0440\u0435-\u0437\u043c\u0435\u0439\u043a\u0435 \u043d\u0430 JS, \u0430 SVG, \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0442\u0435\u0433\u0435 <em>object<\/em> \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, SVG-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438 \u0447\u0451\u0442\u043a\u043e\u0441\u0442\u044c (\u043d\u0430 \u0442\u043e \u043e\u043d \u0438 \u0432\u0435\u043a\u0442\u043e\u0440) \u0430 \u0443 <em>Canvas<\/em> \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f, \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SVG, \u0432\u0435\u0434\u044c \u043d\u0430\u0434\u043e \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<h3>\u041f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442<\/h3>\n<p>  <\/p>\n<p>\u0421 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Vue, \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SVG, \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0441\u0435\u0431\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u043e\u0438\u0441\u043a \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u0442\u0435\u043c\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f SVG \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 Vue<\/li>\n<li>\u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c SVG \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 Vue<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/li>\n<li>\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Vue-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/li>\n<li>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 SPA<\/li>\n<\/ol>\n<p>  <\/p>\n<h3>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u044e \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n<p>  <\/p>\n<ol>\n<li>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<p>\u0423 \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d <em>vue cli<\/em>. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432\u0432\u043e\u0436\u0443 <em>vue create loadprogresser<\/em>, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u044e <em>default<\/em> \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 vue-\u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c loadprogresser, \u0434\u0430\u043b\u044c\u0448\u0435 \u0443\u0431\u0438\u0440\u0430\u044e \u0438\u0437 \u043d\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0435:<\/p>\n<p>   <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td align=\"center\">\u0411\u044b\u043b\u043e<\/td>\n<td align=\"center\">\u0421\u0442\u0430\u043b\u043e<\/td>\n<\/tr>\n<tr>\n<td align=\"center\"> <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ff\/dx\/gz\/ffdxgzse2s6oqmujajql_cz-qjc.png\" width=\"25%\"\/>   <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e default<\/p>\n<p>   <\/td>\n<td align=\"center\"> <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ju\/7o\/xw\/ju7oxwnd0bt6ygl47di54eyiccq.png\" width=\"50%\"\/>   <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0441\u043b\u0435 \u00ab\u0443\u0431\u043e\u0440\u043a\u0438\u00bb<\/p>\n<p>   <\/td>\n<\/tr>\n<tr>\n<td align=\"center\"> <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/db\/vd\/cz\/dbvdczqbvxc4oi1mswth75ofpo0.png\" width=\"50%\"\/>   <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 Vue<\/p>\n<p>   <\/td>\n<td align=\"left\">\n<pre><code class=\"plaintext\">&lt;template&gt;   &lt;div&gt;     &lt;h1&gt;Progresser&lt;\/h1&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt;   export default {name: 'app'} &lt;\/script&gt;;                                                 <\/code><\/pre>\n<p>   <\/p>\n<p>\u041c\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u00abProgresser\u00bb \u0432 App.vue<\/p>\n<p>   <\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>   <\/div>\n<\/div>\n<p>   <\/li>\n<li>\n<h4>\u041f\u043e\u0438\u0441\u043a \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u0442\u0435\u043c\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f SVG \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 Vue<\/h4>\n<p>   <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0439 \u043f\u043e HTML, CSS \u0438 SVG <a href=\"http:\/\/css.yoksel.ru\/svg-path\/\">css.yoksel.ru<\/a> \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 SVG \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u043e\u0433\u043e Vue <a href=\"https:\/\/ru.vuejs.org\/v2\/examples\/svg.html\">SVG-\u0433\u0440\u0430\u0444\u0438\u043a Example<\/a> \u0438 \u043f\u043e \u0442\u0430\u043a\u043e\u0439<a href=\"http:\/\/jsfiddle.net\/Vlad_IT\/qt64rouL\/1\/\"> \u0441\u0441\u044b\u043b\u043e\u0447\u043a\u0435<\/a>. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0440\u043e\u0434\u0438\u043b\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 SVG \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f \u0438 \u0441\u0442\u0430\u0440\u0442\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;template&gt;   &lt;div class=&quot;wrapper&quot;&gt;     &lt;svg version=&quot;1.1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;         width=&quot;100%&quot; height=&quot;100%&quot;&gt; \/\/svg \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440         \/\/\u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c svg-\u0442\u0435\u0433\u0438     &lt;\/svg&gt;   &lt;\/div&gt; &lt;\/template&gt; <\/code><\/pre>\n<p>   <\/li>\n<li>\n<h4>\u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c SVG \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 Vue<\/h4>\n<p>   <\/p>\n<h5>SVG \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a rect<\/h5>\n<p>   <\/p>\n<p> rect \u2014 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430. \u0421\u043e\u0437\u0434\u0430\u044e svg \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 100\u0445100px, \u0438 \u0440\u0438\u0441\u0443\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a rect \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 25:25 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 50\u044550 px, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0447\u0451\u0440\u043d\u044b\u0439 (\u043d\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438)<\/p>\n<p>   <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/4wvp6ay1\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/p>\n<h5>SVG \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 hover:<\/h5>\n<p>   <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a rect \u0432 svg. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a svg \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043a\u043b\u0430\u0441\u0441 \u00absample\u00bb, \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 style vue-\u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u0442\u0438\u043b\u0438 .sample rect (\u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e \u043f\u0440\u044f\u043c\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a rect \u0436\u0451\u043b\u0442\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c) \u0438 .sample rect:hover \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 rect \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438:<\/p>\n<p>   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">&lt;template&gt;     &lt;div id=&quot;app&quot;&gt;         &lt;svg class=&quot;sample&quot; version=&quot;1.1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; width=&quot;100px&quot; height=&quot;100px&quot;&gt;             &lt;rect x=25 y=25 width=&quot;50px&quot; height=&quot;50px&quot;\/&gt;         &lt;\/svg&gt;     &lt;\/div&gt; &lt;\/template&gt;                        &lt;script&gt;                   export default {     name: 'app' } &lt;\/script&gt;                        &lt;style&gt; .sample rect {     fill: yellow;     stroke: green;     stroke-width: 4;     transition: all 350ms; }                        .sample rect:hover {     fill: gray; } &lt;\/style&gt;             <\/code><\/pre>\n<p>   <\/div>\n<\/div>\n<p>   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 JSfiddle<\/b><\/p>\n<div class=\"spoiler_text\">\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/157o4nac\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/div>\n<\/div>\n<p>   <\/p>\n<p>\u0412\u044b\u0432\u043e\u0434: svg \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 template vue-\u0444\u0430\u0439\u043b\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u041d\u0430\u0447\u0430\u043b\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e!<\/p>\n<p>   <\/p>\n<h5>SVG path \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430<\/h5>\n<p>   <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u044f \u0437\u0430\u043c\u0435\u043d\u044e rect \u043d\u0430 path, <code>&lt;path :d=&quot;D&quot; class=&quot;path&quot;\/&gt;<\/code> \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 d \u0442\u0435\u0433\u0430 path \u043f\u0435\u0440\u0435\u0434\u0430\u043c \u0438\u0437 vue \u0441\u0442\u0440\u043e\u043a\u0443 D \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u043f\u0443\u0442\u0438. \u0421\u0432\u044f\u0437\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>v-bind:d=&quot;D&quot;<\/code>, \u0447\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a <code>:d=&quot;D&quot;<\/code> <\/p>\n<p>   <\/p>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 D=\u00abM 0 0 0 50 50 50 50 0 Z\u00bb \u0440\u0438\u0441\u0443\u0435\u0442 \u0442\u0440\u0438 \u043b\u0438\u043d\u0438\u0438 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 0:0-&gt;0:50-&gt;50:50-&gt;0:50 \u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0443\u0440 \u043f\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Z, \u043e\u0431\u0440\u0430\u0437\u0443\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442 50\u044550px \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0438\u0437 \u043a\u043e\u043e\u0434\u0438\u043d\u0430\u0442 0:0. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0438\u043b\u044f \u00abpath\u00bb \u0444\u0438\u0433\u0443\u0440\u0435 \u043f\u0440\u0438\u0434\u0430\u0451\u0442\u0441\u044f \u0436\u0451\u043b\u0442\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u0441\u0435\u0440\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u0432 1px.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u0436\u0451\u043b\u0442\u043e\u0433\u043e PATH<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">    &lt;template&gt;             &lt;div id=&quot;app&quot;&gt;               &lt;svg class=&quot;sample&quot; version=&quot;1.1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; width=&quot;100px&quot; height=&quot;100px&quot;&gt;                     &lt;path :d=&quot;D&quot; class=&quot;path&quot;\/&gt;                 &lt;\/svg&gt;             &lt;\/div&gt;           &lt;\/template&gt;           &lt;script&gt;           export default {             name: 'app',             data(){               return {                 D:&quot;M 0 0 0 50 50 50 50 0 Z&quot;               }             }           }           &lt;\/script&gt;           &lt;style&gt;             .path {               fill:yellow;               stroke:gray;             }           &lt;\/style&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>   <\/li>\n<li>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h4>\n<p>   <\/p>\n<p>\u0412 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443. \u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d svg-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 100px, \u0448\u0438\u0440\u0438\u043d\u043e\u0439 400px, \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d \u0442\u0435\u0433 path, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 d \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443-\u043f\u0443\u0442\u044c d \u0438\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 vue, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 timePoints \u043a\u0443\u0434\u0430, \u043a\u0430\u0436\u0434\u044b\u0435 10\u043c\u0441, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e \u0438\u0437 400 (\u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430)\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 0 \u0434\u043e 100. \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u0432 \u0445\u0443\u043a\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 created, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 update \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 (\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435) \u0442\u043e\u0447\u043a\u0438 \u0432 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 addTime, \u043f\u043e\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434 getSVGTimePoints \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 PATH, \u0447\u0435\u0440\u0435\u0437 setTimeout \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 update<\/p>\n<p>   <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/oku69hw1\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/p>\n<h4>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043b\u044f PATH<\/h4>\n<p>   <\/p>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u0434\u043b\u044f PATH \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 getSVGTimePoints, \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 timePoints \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e reduce. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f reduce \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u00abM 0 0\u00bb (\u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 0:0). \u0414\u0430\u043b\u0435\u0435 \u0432 reduce, \u043a \u0441\u0442\u0440\u043e\u043a\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u044b <u>\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445<\/u> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 dX \u0438 dY. \u0417\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u043f\u0438\u0441\u043d\u0430\u044f \u0431\u0443\u043a\u0432\u0430 \u00abl\u00bb (\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u00abL\u00bb \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445), \u043f\u043e\u0441\u043b\u0435 \u00abl\u00bb \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f dX \u0438 \u043f\u043e\u0442\u043e\u043c dY, \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435, dY = 1 (\u043f\u0440\u0438\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 1px), \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043f\u043e \u043e\u0441\u0438 X \u0431\u0443\u0434\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0438\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c dX \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043d\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f PATH<br \/>   <code>path +=`L ${this.timePoints.length} 0`<\/code><br \/>   \u044f \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0438, \u0434\u043e\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e \u043b\u0438\u043d\u0438\u044e \u0434\u043e \u043e\u0441\u0438 \u0425. \u0415\u0441\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044c \u043a\u043e\u043d\u0442\u0443\u0440, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u0442\u0440\u043e\u043a\u0438 \u00abZ\u00bb, \u044f \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0431\u0435\u0437 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f (fill) \u043d\u043e \u044d\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u0442\u0430\u043a, \u0442\u0430\u043c \u0433\u0434\u0435 \u043d\u0435 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u043e, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 stroke \u2014 \u043e\u0431\u0432\u043e\u0434\u043a\u0430.<\/p>\n<p>   <\/p>\n<pre><code class=\"javascript\">getSVGTimePoints:function(){     let predY = 0     let path = this.timePoints.reduce((str, item)=&gt;{         let dY = item - predY         predY = item         return str + `l 1 ${dY} `     },'M 0 0 ')     path +=`L ${this.timePoints.length} 0`\/\/ Z` \u043a\u043e\u043d\u0442\u0443\u0440 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u0442\u044c     return path     },         <\/code><\/pre>\n<p>   <\/p>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041c\u043e\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u043a DOM \u0438 \u0443\u0437\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/p>\n<p>   <\/p>\n<ol>\n<li>\n<h5>ref \u2014 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 DOM<\/h5>\n<p>   <\/p>\n<p>DIV-\u0432\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 (\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d svg) \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043a\u043b\u0430\u0441\u0441 wrapper \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u0438. \u0418 \u0447\u0442\u043e\u0431\u044b svg \u0437\u0430\u043d\u044f\u043b \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0437\u0430\u0434\u0430\u043b \u0435\u0433\u043e \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443 100%. RECT, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0442\u043e\u0436\u0435 \u0437\u0430\u0439\u043c\u0451\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u043d\u043e\u043c \u0434\u043b\u044f PATH <\/p>\n<p>   <\/p>\n<pre><code class=\"html\">&lt;div id=&quot;app&quot; class=&quot;wrapper&quot; ref=&quot;loadprogresser&quot;&gt;     &lt;svg id=&quot;sample&quot; version=&quot;1.1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;         width=&quot;100%&quot; height=&quot;100%&quot;&gt;         &lt;rect x=0 y=0 width=&quot;100%&quot; height=&quot;100%&quot;\/&gt;         &lt;path :d=&quot;d&quot; fill=&quot;transparent&quot; stroke=&quot;black&quot;\/&gt;     &lt;\/svg&gt; &lt;\/div&gt;                 <\/code><\/pre>\n<p>   <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043c\u043e\u0439 DIV-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c DOM Vue, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ref \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e \u0435\u043c\u0443 \u0438\u043c\u044f \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0438\u0441\u043a <code>ref=&quot;loadprogresser&quot;<\/code>. \u0412 \u0445\u0443\u043a\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 <code>mounted<\/code> \u044f \u0432\u044b\u0437\u043e\u0432\u0443 \u043c\u0435\u0442\u043e\u0434 getScales(), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u0441\u0442\u0440\u043e\u043a\u043e\u0439 <code>const {width, height} = this.$refs.loadprogresser.getBoundingClientRect()<\/code> \u0443\u0437\u043d\u0430\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 DIV-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432 DOM.<\/p>\n<p>   <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u043f\u0440\u0438\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u043e\u0441\u0438 \u0425 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u0433\u043e \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043a\u043e\u043b-\u0432\u0430 \u0442\u043e\u0447\u0435\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c. \u041c\u0430\u0441\u0448\u0442\u0430\u0431 \u043f\u043e \u043e\u0441\u0438 Y \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438.<\/p>\n<p>   <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/tf4dx3uj\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/li>\n<li>\n<h5>transform \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442<\/h5>\n<p>   <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044f \u0437\u0430\u043c\u0435\u0447\u0430\u044e, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 0:0 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0430\u0441\u044c \u0438\u0437 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430, \u0438 \u043e\u0441\u044c Y \u0440\u043e\u0441\u043b\u0430 \u0431\u044b \u0432\u0432\u0435\u0440\u0445, \u0430 \u043d\u0435 \u0432\u043d\u0438\u0437. \u041c\u043e\u0436\u043d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0447\u0451\u0442\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u043d\u043e \u0432 SVG \u0435\u0441\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 transform, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b.<\/p>\n<p>   <\/p>\n<p>\u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a Y \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 -1 (\u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f Y \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u0432\u0435\u0440\u0445), \u0438 \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043d\u0430 <u>\u043c\u0438\u043d\u0443\u0441<\/u> \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0439 (\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u0438), \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432 \u0445\u0443\u043a\u0435 <code>mounted<\/code> \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c: <code>this.transform = `scale( 1, -1) translate(0,${-this.wrapHeight})`<\/code> <\/p>\n<p>   <\/p>\n<p>\u041d\u043e \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u043a PATH \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c PATH \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 (\u0442\u0435\u0433 g) \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;g :transform=&quot;transform&quot;&gt;     &lt;path :d=&quot;d&quot; fill=&quot;transparent&quot; stroke=&quot;black&quot;\/&gt; &lt;\/g&gt;<\/code><\/pre>\n<p>   <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0430\u043b \u0431\u043b\u0438\u0436\u0435 \u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0443<\/p>\n<p>   <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/twarkc9q\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/li>\n<li>\n<h5>SVG text \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/h5>\n<p>   <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 % \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432 SVG \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c (\u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 HTML\/CSS), \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f) dominant-baseline=\u00abcentral\u00bb \u0438 text-anchor=\u00abmiddle\u00bb<\/p>\n<p>   <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u0432 SVG \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c:<\/p>\n<p>   <code>&lt;text x=&quot;50%&quot; y=&quot;50%&quot; dominant-baseline=&quot;central&quot; text-anchor=&quot;middle&quot;&gt;{{TextPrc}}&lt;\/text&gt;<\/code>   <\/p>\n<p>\u0433\u0434\u0435 TextPrc \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0439 \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a \u043a \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 <code>this.TextPrc = `${((this.Samples * 100)\/this.maxSamples) | 0} %`<\/code>.<\/p>\n<p>   <\/p>\n<p>\u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043d\u0430\u0447\u0430\u043b\u0430 x=\u00ab50%\u00bb y=\u00ab50%\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0437\u0430 \u0442\u043e \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u043a\u0441\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u043b\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b dominant-baseline \u0438 text-anchor.<\/p>\n<p>   <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/jsfiddle.net\/Gerasim_v_Gerasimov\/gjnpmutr\/embedded\/\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>   <\/p>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u0435\u0449\u0438 \u043f\u043e \u0442\u0435\u043c\u0435 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>   <\/li>\n<\/ol>\n<\/li>\n<li>\n<h4>\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Vue-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h4>\n<p>   <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044e\u0441\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u0442, \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0442: maxSamples \u2014 \u043a\u043e\u043b-\u0432\u043e \u0441\u044d\u043c\u043f\u043b\u043e\u0432 \u0432 100%-\u0430\u0445 \u0448\u0438\u0440\u0438\u043d\u044b, \u0438 Point \u2014 \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0442\u043e\u0447\u043a\u0430) \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043d\u0435\u0441\u0435\u043d\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u043e\u0447\u0435\u043a (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u043a). \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 props<\/p>\n<p>   <\/p>\n<pre><code class=\"javascript\">props:{     maxSamples: {\/\/\u043a\u043e\u043b-\u0432\u043e \u0441\u044d\u043c\u043f\u043b\u043e\u0432 \u0432 100%-\u0430\u0445 \u0448\u0438\u0440\u0438\u043d\u044b         type: Number,         default: 400     },     Point:{\/\/\u043d\u043e\u0432\u0430\u044f \u0442\u043e\u0447\u043a\u0430         value:0     } }                <\/code><\/pre>\n<p>   <\/p>\n<h5>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e<\/h5>\n<p>   <\/p>\n<p>\u0417\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u0430, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e getPath \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 Point (\u0430 \u0440\u0430\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u0442, \u0442\u043e \u0438 \u043f\u0435\u0440\u0435\u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 Point)<\/p>\n<p>   <\/p>\n<pre><code class=\"javascript\">            \/\/\u0448\u0430\u0431\u043b\u043e\u043d             ...             &lt;path :d=&quot;getPath&quot;\/&gt;             ...             \/\/\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430             props:{                 ...                 Point:{                   value:0                 }                         \/\/\u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e             computed:{                 getPath(){                   this.addValue({value:this.Point.value})                   return this.getSVGPoints()\/\/this.d                 }               },                      <\/code><\/pre>\n<p>   <\/p>\n<p>\u042f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u043b Point \u0442\u0438\u043f\u0430 Number, \u0447\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u0441\u0435 \u0442\u043e\u0447\u043a\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0442\u0430\u043a\u043e\u0439 Point \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0438\u0441\u043b\u043e 10, \u0442\u043e \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0442\u043e\u0447\u043a\u0430, \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445.<\/p>\n<p>   <\/p>\n<p>\u0417\u0430\u043c\u0435\u043d\u0430 \u0442\u0438\u043f\u0430 Point \u0441 Number \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 {value:0} \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u2014 computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e getPath() \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u0430\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044e \u0442\u043e\u0447\u043a\u0443, \u0447\u0435\u0440\u0435\u0437 Point.value \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u0435\u043a<\/p>\n<p>   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Progresser.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">&lt;template&gt;     &lt;div class=&quot;wrapper&quot; ref=&quot;loadprogresser&quot;&gt;         &lt;svg    class=&quot;wrapper__content&quot;                 version=&quot;1.1&quot;                 xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;                 width=&quot;100%&quot; height=&quot;100%&quot;         &gt;             &lt;g :transform=&quot;transform&quot;&gt;                 &lt;path :d=&quot;getPath&quot;\/&gt;             &lt;\/g&gt;             &lt;text x=&quot;50%&quot; y=&quot;50%&quot;                 dominant-baseline=&quot;central&quot;                 text-anchor=&quot;middle&quot;&gt;                 {{TextPrc}}             &lt;\/text&gt;         &lt;\/svg&gt;     &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { props:{     maxSamples: {\/\/\u043a\u043e\u043b-\u0432\u043e \u0441\u044d\u043c\u043f\u043b\u043e\u0432 \u0432 100%-\u0430\u0445 \u0448\u0438\u0440\u0438\u043d\u044b     type: Number,     default: 400     },     Point:{     value:0     } }, data(){     return {     Samples:0,\/\/\u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u044d\u043c\u043f\u043b\u0430     wrapHeight:100,\/\/\u0432\u044b\u0441\u043e\u0442\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u0434\u043e \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435     maxY:0,\/\/\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e Y \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 (\u0434\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f)     scales:{         w:1,\/\/\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 (\u0440\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430)         h:1 \/\/\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438             \/\/(\u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 Y \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430)     },     Points:[],\/\/\u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u0438\u0437 Point.value)     transform:'scale( 1, -1) translate(0,0)',     TextPrc: '0%'     }  }, mounted: function(){     this.getScales() }, methods:{     getScales(){         const {width, height} = this.$refs.loadprogresser.getBoundingClientRect()         \/\/\u041a\u043e\u044d\u0444. \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438         this.scales.w = width \/ this.maxSamples         \/\/\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 Y \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430         this.wrapHeight = height         this.transform = `scale( 1, -1) translate(0,${-this.wrapHeight}) rotate(0)`     },     getVScale(){\/\/\u0440\u0430\u0441\u0447\u0451\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438         this.scales.h = (this.maxY == 0)? 0 : this.wrapHeight \/ this.maxY     },     \/\/\u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u044f\u044e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0438 \u0432\u044b\u0434\u0430\u044e \u0448\u043a\u0430\u043b\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430     getYMax({value = 0}){         this.maxY = (value &gt; this.maxY)             ? value             : this.maxY      },     addValue({value = 0}){         if (this.Samples &lt; this.maxSamples) {             this.getYMax({value})             this.getVScale()             this.Points.push(value) \/\/\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 Int             this.Samples ++;             this.TextPrc = `${((this.Samples * 100)\/this.maxSamples) | 0} %`         }     },     getSVGPoints(){         \/\/\u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043b\u044f Path         let predY = 0         let path = this.Points.reduce((str, item)=&gt;{             let dY = (item - predY) * this.scales.h             predY = item             return str + `l ${this.scales.w} ${dY} `         },'M 0 0 ')         path +=`L ${this.Points.length * this.scales.w} 0 `\/\/ Z` \u043a\u043e\u043d\u0442\u0443\u0440 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u0442\u044c         return path     }, }, computed:{     getPath(){         this.addValue({value:this.Point.value})\/\/\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0442\u043e\u0447\u043a\u0443         return this.getSVGPoints()\/\/this.d - \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c SVG PATH     } } } &lt;\/script&gt;  &lt;style scoped&gt;  .wrapper { width: 400px;\/* \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u043f\u0440\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ height: 100px;\/*\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 (\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ font-size: 4rem; font-weight: 600; border-left: 1px gray solid; border-right: 1px gray solid; overflow: hidden; }  .wrapper__content path { opacity: 0.5;     fill: lightgreen;     stroke: green;     stroke-width: 1; }  .wrapper__content text { opacity: 0.5; }  &lt;\/style&gt;                                    <\/code><\/pre>\n<p>   <\/div>\n<\/div>\n<p>   <\/p>\n<h5>\u0412\u044b\u0437\u043e\u0432 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/h5>\n<p>   <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<br \/>   <code>import Progresser from &quot;.\/components\/Progresser&quot;<\/code><br \/>   \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432 \u0441\u0435\u043a\u0446\u0438\u0438<br \/>   <code>components: {Progresser }<\/code><\/p>\n<p>   <\/p>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 progresser \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439:<\/p>\n<p>   <\/p>\n<pre><code class=\"html\">&lt;progresser     class=&quot;progresser&quot;     :maxSamples = &quot;SamplesInProgresser&quot;     :Point = &quot;Point&quot; &gt;&lt;\/progresser&gt;                      <\/code><\/pre>\n<p>   <\/p>\n<p>\u0427\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441 \u00abprogreser\u00bb \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u0430 \u0443 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430. \u0412 props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f maxSamples (\u043c\u0430\u043a\u0441 \u043a\u043e\u043b-\u0432\u043e \u0442\u043e\u0447\u0435\u043a \u0432 \u0433\u0440\u0430\u0444\u0438\u043a\u0435) \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f SamplesInProgresser, \u0438 \u0432 props Point \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 (\u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430) \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 Point \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. Point \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0440\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 update, \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430. \u041f\u043e\u043b\u0443\u0447\u0430\u044e \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n<p>   <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/um\/rb\/y4\/umrby4sqxabfzgz_ng1lnk6xgcy.gif\"\/>   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f App.vue<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">&lt;template&gt;     &lt;div&gt;         &lt;progresser             class=&quot;progresser&quot;             :maxSamples = &quot;SamplesInProgresser&quot;             :Point = &quot;Point&quot;         &gt;&lt;\/progresser&gt;       &lt;\/div&gt; &lt;\/template&gt;                        &lt;script&gt; import Progresser from &quot;.\/components\/Progresser&quot; export default { name: 'app', data(){     return {         SamplesInProgresser:400,\/\/\u043c\u0430\u043a\u0441 \u043a\u043e\u043b-\u0432\u043e \u0442\u043e\u0447\u0435\u043a          Point:{value:0},\/\/&quot;\u0442\u043e\u0447\u043a\u0430&quot;         index:0, \/\/\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043a\u043e\u043b-\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a         TimeM:100 \/\/\u0431\u0430\u0437\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b     } }, created: function () {     this.update() }, methods:{     update(){         if (this.index &lt; this.SamplesInProgresser) {             this.index++;             this.Point = {value:(this.TimeM*Math.random() | 0)}             this.TimeM *= 1.01             setTimeout(this.update, 0)         }     }     }, components: {     Progresser     } } &lt;\/script&gt;  &lt;style&gt; #app {     font-family: 'Avenir', Helvetica, Arial, sans-serif;     margin-top: 60px; }  \/*\u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438*\/ .progresser {     width: 300px;     height: 80px;  } &lt;\/style&gt;                                    <\/code><\/pre>\n<p>   <\/div>\n<\/div>\n<p>   <\/li>\n<li>\n<h4>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 SPA<\/h4>\n<p>   <\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0442\u043e\u043c\u0443, \u0440\u0430\u0434\u0438 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u0437\u0430\u0442\u0435\u0432\u0430\u043b\u043e\u0441\u044c. \u0418 \u0442\u0430\u043a, \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0430\u0441\u0438\u0440\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u0437 \u0431\u0430\u0437\u044b \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043e \u043d\u0435\u043a\u0438\u0445 \u043b\u0438\u0447\u043d\u043e\u0441\u0442\u044f\u0445. \u0412\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e. \u042f \u0431\u0443\u0434\u0443 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e new Date().getTime() \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u0443\u0434\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438 \u0437\u0430\u0442\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>   <\/p>\n<pre><code class=\"javascript\">async getCandidatesData(){ ...     this.LoadRecords = true \/\/\u0441\u043e\u043e\u0431\u0449\u0430\u044e \u0447\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0431\u043b\u043e\u043a \u0441 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c     ...     this.SamplesInProgresser = uris.length \/\/\u0441\u043e\u043e\u0431\u0449\u0430\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0431\u0443\u0434\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c     ...     for (let item of uris) {\/\/\u0432 uris \u043c\u0430\u0441\u0441\u0438\u0432 URL \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c         try {             const start = new Date().getTime()\/\/\u0432\u0440\u0435\u043c\u044f \u0434\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438             candidate = await this.$store.dispatch('GET_CANDIDATE', item)             const stop = new Date().getTime()\/\/\u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f              this.Point = {value:(stop-start)}\/\/\u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0440\u0430\u0437\u043d\u043e\u0441\u0442\u044c \u0432 Point             ...         <\/code><\/pre>\n<p>   <\/p>\n<p>\u0412 data \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:<\/p>\n<p>   <\/p>\n<pre><code class=\"javascript\">data (){     return {         ...         \/\/\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438         LoadRecords:false,         SamplesInProgresser:400,         Point:{value:0}                }         <\/code><\/pre>\n<p>   <\/p>\n<p>\u0418 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435:<\/p>\n<p>   <\/p>\n<pre><code class=\"html\">&lt;!-- \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0437\u0430\u043f\u0438\u0441\u0435\u0439--&gt; &lt;div class=&quot;wait_loading&quot; v-show=&quot;LoadRecords&quot;&gt;         &lt;progresser             class=&quot;progresser&quot;             :maxSamples = &quot;SamplesInProgresser&quot;             :Point = &quot;Point&quot;         &gt;&lt;\/progresser&gt;       &lt;\/div&gt;         <\/code><\/pre>\n<p>   <\/li>\n<\/ol>\n<p>  <\/p>\n<h4>\u0412\u044b\u0432\u043e\u0434\u044b<\/h4>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0414\u043e \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a SVG \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u043c HTML-\u0442\u0435\u0433\u0430\u043c, \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u043e\u0439. SVG \u2014 \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0442\u0435\u043f\u0435\u0440\u044c \u0447\u0430\u0449\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 <\/p>\n<p>  <\/p>\n<h4>\u0421\u0441\u044b\u043b\u043a\u0438<\/h4>\n<p>  <a href=\"https:\/\/github.com\/GerasimGerasimov\/loadprogresser\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/a><br \/>  <a href=\"http:\/\/css.yoksel.ru\/svg-path\/\">\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e svg-path<\/a><\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/460399\/\"> https:\/\/habr.com\/ru\/post\/460399\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u0423\u0447\u0443\u0441\u044c \u043d\u0430 front-end, \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u0432 \u0443\u0447\u0435\u0431\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e SPA \u043d\u0430 Vue.js \u0434\u043b\u044f back-end, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0431\u043e\u0442\u0430. \u0411\u043e\u0442 \u043d\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0442 0 \u0434\u043e 500 \u0437\u0430\u043f\u0438\u0441\u0435\u0439, \u0438 \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0445: \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c, \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0438 back-end \u043d\u0438 \u0431\u043e\u0442, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u0430 \u0432\u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u0430, \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 500 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043e\u0442 10 \u0434\u043e 40 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043d\u0430\u0447\u0430\u043b\u0443, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0441\u043f\u0438\u043d\u0435\u0440, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u044b\u0441\u043a\u0430\u043b \u0431\u043e\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e % \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0446\u0438\u0444\u0440\u0430\u043c\u0438 \u2014 \u0441\u043a\u043e\u043b\u044c\u043a\u043e % \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e<\/li>\n<li>\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043c \u2014 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438<\/li>\n<li>\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u2014 % \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e \u043c\u0435\u0440\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a, \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0431\u043b\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044f \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-o\/wr\/mc\/-owrmchonzxft0kpoabdeumz2tm.gif\"\/>  <\/p>\n<p>\u2026 \u043f\u043e-\u043c\u043e\u0435\u043c\u0443, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0437\u0430\u0431\u0430\u0432\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u043b\u0441\u044f \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c. \u0413\u0440\u0430\u0444\u0438\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044f \u0434\u043e \u0441\u0435\u043b\u0435 \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438\u043d\u0435\u0441\u043b\u0430 \u043c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435, \u043d\u043e \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 SVG \u0438 Vue.<\/p>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-292196","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/292196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=292196"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/292196\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=292196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=292196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=292196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}