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

Автор: viklviv

Источник