- PVSM.RU - https://www.pvsm.ru -
Для работы с SVG есть очень много библиотек для рисования. Мы рассмотрим плагин для jQuery.
Автор плагина Keith Wood, живёт в Сиднее, Австралия. Работает в Fairfax Media в качестве Java Developer. На протяжении многих лет вносит свой вклад в jQuery сообщество. Работает над книгой по разработке JQuery плагинов.
Плагин jquery.svg.js позволяет Вам манипулировать векторной графикой по спецификации SVG 1.1.
Примеры с описанием [1]
Справочная документация [2]
Для подключения плагина прописываем в 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');
$(selector).svg({loadURL: 'lion.svg'});
$(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
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/38145
Ссылки в тексте:
[1] Примеры с описанием: http://keith-wood.name/svg.html
[2] Справочная документация: http://keith-wood.name/svgRef.html
[3] Источник: http://habrahabr.ru/post/185750/
Нажмите здесь для печати.