{"id":185750,"date":"2013-07-07T00:03:02","date_gmt":"2013-07-06T20:03:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=185750"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=185750","title":{"rendered":"<span class=\"post_title\">jQuery plugin \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0427\u0430\u0441\u0442\u044c 1<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f jQuery.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0410\u0432\u0442\u043e\u0440 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Keith Wood, \u0436\u0438\u0432\u0451\u0442 \u0432 \u0421\u0438\u0434\u043d\u0435\u0435, \u0410\u0432\u0441\u0442\u0440\u0430\u043b\u0438\u044f. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Fairfax Media \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 Java Developer. \u041d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u043b\u0435\u0442 \u0432\u043d\u043e\u0441\u0438\u0442 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u0432 jQuery \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0434 \u043a\u043d\u0438\u0433\u043e\u0439 \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 JQuery \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. <\/p>\n<p>  \u041f\u043b\u0430\u0433\u0438\u043d <b>jquery.svg.js<\/b> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0412\u0430\u043c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 SVG 1.1.<br \/>  <a href=\"http:\/\/keith-wood.name\/svg.html\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c<\/a><br \/>  <a href=\"http:\/\/keith-wood.name\/svgRef.html\">\u0421\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<p>  \u0414\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 <i>head<\/i> \u0447\u0430\u0441\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d.   <\/p>\n<pre><code class=\"javascript\">&lt;style type=&quot;text\/css&quot;&gt;@import &quot;jquery.svg.css&quot;;&lt;\/style&gt;  &lt;script type=&quot;text\/javascript&quot; src=&quot;jquery.svg.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430  <\/p>\n<pre><code class=\"javascript\">&lt;script type=&quot;text\/javascript&quot; src=&quot;jquery.svganim.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>  SVG \u0445\u043e\u043b\u0441\u0442 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043a <i>div<\/i> \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438   <\/p>\n<pre><code class=\"javascript\">$(selector).svg();<\/code><\/pre>\n<p>  selector \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b>id<\/b> \u0442\u0435\u0433\u0430 <i>div<\/i><br \/>  svg() \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u0445\u043e\u043b\u0441\u0442\u043e\u043c:  <\/p>\n<ul>\n<li>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<br \/> \n<pre><code class=\"javascript\">$(selector).svg('get');<\/code><\/pre>\n<p>  \u043f\u0440\u0438\u043c\u0435\u0440  <\/p>\n<pre><code class=\"javascript\">var svg = $('#svgintro').svg('get');  svg.circle(130, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3});<\/code><\/pre>\n<p>  <\/li>\n<li>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<br \/> \n<pre><code class=\"javascript\">$(selector).svg('destroy');<\/code><\/pre>\n<p>  <\/li>\n<li>URL \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438<br \/> \n<pre><code class=\"javascript\">$(selector).svg({loadURL: 'lion.svg'});<\/code><\/pre>\n<p>  <\/li>\n<li>\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <i>drawIntro<\/i> \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430<br \/> \n<pre><code class=\"javascript\">$(selector).svg({onLoad: drawIntro});<\/code><\/pre>\n<p>   \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <i>drawIntro<\/i>  <\/p>\n<pre><code class=\"javascript\">function drawIntro(svg) {      svg.circle(75, 75, 50,          {fill: 'none', stroke: 'red', strokeWidth: 3});      var g = svg.group({stroke: 'black', strokeWidth: 2});      svg.line(g, 15, 75, 135, 75);      svg.line(g, 75, 15, 75, 135);  }<\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/107\/b17\/5d1\/107b175d116771411be01846b554b7ce.png\"\/>  <\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043a\u043e\u0434 \u0432 SVG \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0438 \u043a\u043e\u0434 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 jQuery.<\/p>\n<p>  \u043a\u043e\u0434 \u0432 SVG  <\/p>\n<pre><code class=\"xml\">&lt;rect x=&quot;20&quot; y=&quot;50&quot; width=&quot;100&quot; height=&quot;50&quot;      fill=&quot;yellow&quot; stroke=&quot;navy&quot; stroke-width=&quot;5&quot;  \/&gt;  &lt;rect x=&quot;150&quot; y=&quot;50&quot; width=&quot;100&quot; height=&quot;50&quot; rx=&quot;10&quot;      fill=&quot;green&quot; \/&gt;  &lt;g transform=&quot;translate(270 80) rotate(-30)&quot;&gt;    &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;500&quot; rx=&quot;10&quot;        fill=&quot;none&quot; stroke=&quot;purple&quot; stroke-width=&quot;3&quot; \/&gt;  &lt;\/g&gt;  &lt;circle cx=&quot;70&quot; cy=&quot;220&quot; r=&quot;50&quot;      fill=&quot;red&quot; stroke=&quot;blue&quot; stroke-width=&quot;5&quot;  \/&gt;  &lt;g transform=&quot;translate(175 220)&quot;&gt;    &lt;ellipse rx=&quot;75&quot; ry=&quot;50&quot; fill=&quot;red&quot;  \/&gt;  &lt;\/g&gt;  &lt;ellipse transform=&quot;translate(300 220) rotate(-30)&quot;      rx=&quot;75&quot; ry=&quot;50&quot; fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot;  \/&gt;  &lt;g stroke=&quot;green&quot; &gt;    &lt;line x1=&quot;450&quot; y1=&quot;120&quot; x2=&quot;550&quot; y2=&quot;20&quot; stroke-width=&quot;5&quot;  \/&gt;    &lt;line x1=&quot;550&quot; y1=&quot;120&quot; x2=&quot;650&quot; y2=&quot;20&quot; stroke-width=&quot;10&quot;  \/&gt;    &lt;line x1=&quot;650&quot; y1=&quot;120&quot; x2=&quot;750&quot; y2=&quot;20&quot; stroke-width=&quot;15&quot;  \/&gt;    &lt;line x1=&quot;750&quot; y1=&quot;120&quot; x2=&quot;850&quot; y2=&quot;20&quot; stroke-width=&quot;20&quot;  \/&gt;    &lt;line x1=&quot;850&quot; y1=&quot;120&quot; x2=&quot;950&quot; y2=&quot;20&quot; stroke-width=&quot;25&quot;  \/&gt;  &lt;\/g&gt;  &lt;polyline fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;5&quot;       points=&quot;450,250              475,250 475,220 500,220 500,250              525,250 525,200 550,200 550,250              575,250 575,180 600,180 600,250              625,250 625,160 650,160 650,250              675,250&quot; \/&gt;  &lt;polygon fill=&quot;lime&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot;       points=&quot;800,150 900,180 900,240 800,270 700,240 700,180&quot; \/&gt;<\/code><\/pre>\n<p>  \u0442\u043e\u0442 \u0436\u0435 \u0440\u0438\u0441\u0443\u043d\u043e\u043a, \u043a\u043e\u0434 \u0432 jQuery.SVG  <\/p>\n<pre><code class=\"javascript\">svg.rect(20, 50, 100, 50, {fill: 'yellow', stroke: 'navy', strokeWidth: 5}); svg.rect(150, 50, 100, 50, 10, 10, {fill: 'green'}); var g = svg.group({transform: 'translate(270 80) rotate(-30)'});     svg.rect(g, 0, 0, 100, 50, 10, 10, {fill: 'none', stroke: 'purple', strokeWidth: 3}); svg.circle(70, 220, 50, {fill: 'red', stroke: 'blue', strokeWidth: 5}); var g = svg.group({transform: 'translate(175 220)'});     svg.ellipse(g, '', '', 75, 50, {fill: 'yellow'});  svg.ellipse('', '', 75, 50, {transform: 'translate(300 220) rotate(-30)',  fill: 'none', stroke: 'blue', strokeWidth: 10});  var g = svg.group({stroke: 'green'});     svg.line(g, 450, 120, 550, 20, {strokeWidth: 5});     svg.line(g, 550, 120, 650, 20, {strokeWidth: 10});     svg.line(g, 650, 120, 750, 20, {strokeWidth: 15});     svg.line(g, 750, 120, 850, 20, {strokeWidth: 20});     svg.line(g, 850, 120, 950, 20, {strokeWidth: 25});  svg.polyline([[450,250], [475,250],[475,220],[500,220],[500,250],      [525,250],[525,200],[550,200],[550,250],      [575,250],[575,180],[600,180],[600,250],      [625,250],[625,160],[650,160],[650,250],[675,250]],      {fill: 'none', stroke: 'blue', strokeWidth: 5});  svg.polygon([[800,150],[900,180],[900,240],[800,270],[700,240],[700,180]],      {fill: 'lime', stroke: 'blue', strokeWidth: 10}); <\/code><\/pre>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/185750\/\"> http:\/\/habrahabr.ru\/post\/185750\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f jQuery.  <\/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-185750","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/185750","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=185750"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/185750\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=185750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=185750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=185750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}