jQuery plugin для использования SVG графики. Часть 1

Для работы с SVG есть очень много библиотек для рисования. Мы рассмотрим плагин для jQuery.

Введение

Автор плагина Keith Wood, живёт в Сиднее, Австралия. Работает в Fairfax Media в качестве Java Developer. На протяжении многих лет вносит свой вклад в jQuery сообщество. Работает над книгой по разработке JQuery плагинов.

Плагин jquery.svg.js позволяет Вам манипулировать векторной графикой по спецификации SVG 1.1.
Примеры с описанием
Справочная документация

Для подключения плагина прописываем в head части файлы стилей и плагин.

<style type="text/css">@import "jquery.svg.css";</style>  <script type="text/javascript" src="jquery.svg.js"></script>

Также при необходимости подключаем расширения плагина

<script type="text/javascript" src="jquery.svganim.js"></script>

SVG холст присоединяем к div в виде функции

$(selector).svg();

selector — свойство id тега div
svg() — функция плагина.

Возможны следующие манипуляции с холстом:

• Получение обёртки для заданного контейнера
  

  $(selector).svg('get');

  пример

  var svg = $('#svgintro').svg('get');  svg.circle(130, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3});

• Удаление функциональности для заданного контейнера
  

  $(selector).svg('destroy');

• URL исходного документа для вставки
  

  $(selector).svg({loadURL: 'lion.svg'});

• Вызов функции drawIntro с кодом построения рисунка методами плагина
  

  $(selector).svg({onLoad: drawIntro});

  пример функции drawIntro

  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);  }

  Результат
  

Для сравнения приведу код в SVG формате и код плагина jQuery.

код в SVG

<rect x="20" y="50" width="100" height="50"      fill="yellow" stroke="navy" stroke-width="5"  />  <rect x="150" y="50" width="100" height="50" rx="10"      fill="green" />  <g transform="translate(270 80) rotate(-30)">    <rect x="0" y="0" width="100" height="500" rx="10"        fill="none" stroke="purple" stroke-width="3" />  </g>  <circle cx="70" cy="220" r="50"      fill="red" stroke="blue" stroke-width="5"  />  <g transform="translate(175 220)">    <ellipse rx="75" ry="50" fill="red"  />  </g>  <ellipse transform="translate(300 220) rotate(-30)"      rx="75" ry="50" fill="none" stroke="blue" stroke-width="10"  />  <g stroke="green" >    <line x1="450" y1="120" x2="550" y2="20" stroke-width="5"  />    <line x1="550" y1="120" x2="650" y2="20" stroke-width="10"  />    <line x1="650" y1="120" x2="750" y2="20" stroke-width="15"  />    <line x1="750" y1="120" x2="850" y2="20" stroke-width="20"  />    <line x1="850" y1="120" x2="950" y2="20" stroke-width="25"  />  </g>  <polyline fill="none" stroke="blue" stroke-width="5"       points="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" />  <polygon fill="lime" stroke="blue" stroke-width="10"       points="800,150 900,180 900,240 800,270 700,240 700,180" />

тот же рисунок, код в jQuery.SVG

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});