Скачать плагин
jQuery плагин, который позволяет Вам взаимодействовать с холстом SVG. Последняя версия 1.4.2 и доступна под лицензиями MIT и GPL.
Введение
SVG –это язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML.
Поддержка в браузерах
| Браузер | Версии | Поддерживает |
|---|---|---|
| Internet Explorer | 8.0 | Нет |
| Mozilla Firefox | с 1.5включая 3.0 и текущую 3.5 | Да |
| Netscape Navigator | 9.0 | Да |
| Google Chrome | 3.0 | Да |
| Safari | 4.0 | Да |
| Opera | с 8.0 включая 9.5 | Да |
Пример №1:
В разделе <head>
Подключаем необходимые файлы
<style type="text/css">@import "jquery.svg.css";</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type="text/javascript" src="jquery.svg.js"></script>
Задаём стиль для div’a в котором будет отображаться результат
Задаём стиль для div’a в котором будет результат, в разделе <head>
<style>#svgintro { float: right; width: 150px; height: 150px; margin-right: 30px; background: #fff; border: 1px solid #3c8243; }</style>
В разделе <body>
Создаём div и button
<div id="svgintro"> </div>
<button type="button" id="remove">Remove</button>
В разделе <script type="text/javascript">
пишем javaScript код….
Создаём функциюdrawIntro(svg) эта функция будет вызвана при загрузке страницы, и в данном случае нарисует нам круг с перекрестием
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);
}
Вешаем на кнопку событие toggle для создания\удаления рисунка
$('#remove').toggle(function() {
$(this).text('Re-attach');
$('#svgintro').svg('destroy');
},
function() {
$(this).text('Remove');
$('#svgintro').svg({onLoad: drawIntro});
});
$('#svgintro').svg({onLoad: drawIntro});
Закрываем открытые теги и смотрим че получилось….
Полный код примера
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG</title>
<style type="text/css">@import "jquery.svg.css";</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<style>
#svgintro { float: right; width: 150px; height: 150px; margin-right: 30px; background: #fff; border: 1px solid #3c8243; }
</style>
</head>
<body>
<div id="svgintro"> </div>
<button type="button" id="remove">Remove</button>
<script type="text/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);
}
$('#remove').toggle(function() {
$(this).text('Re-attach');
$('#svgintro').svg('destroy');
},
function() {
$(this).text('Remove');
$('#svgintro').svg({onLoad: drawIntro});
});
$('#svgintro').svg({onLoad: drawIntro});
</script>
</body>
</html>
Скачать пример
Пример №2:
Этот замечательный плагин также позволяет загружать внешние SVG файлы вот такой вот строкой $('#svgload').svg({loadURL: 'lion.svg'});
$('#svgload') – это слой с результатом
'lion.svg' – это внешний файл, можете прописать полный путь к файлу
Создать SVG файл можно хоть в CorelDraw, хоть в illustrator.
Вот как это всё должно выглядеть:
как и в первом примере подключаем необходимые файлы
В секции <body> создаём div и и button
<div id="svgload" style="width: 100%; height: 300px;"></div>
<button type="button" id="addInline">Picture</button>
Дальше пишем javaScript код
<script type="text/javascript">
$("#addInline").click(function(){
$('#svgload').svg({loadURL: 'lion.svg'});
});
</script
Закрываем теги и смотрим че получилось.
Полный код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG Load</title>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type="text/javascript" src="jquery.svg.js"></script>
</head>
<body>
<div id="svgload" style="width: 100%; height: 300px;">
</div>
<button type="button" id="addInline">Add</button>
<button type="button" id="clear1">Clear</button>
<script type="text/javascript">
$("#addInline").click(function(){
$('#svgload').svg({loadURL: 'lion.svg'});
});
</script>
</body>
</html>
Скачать пример
Пример №3
SVG DOM
Сейчас мы нарисуем объект и закрасим его. Приведу сразу полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type="text/javascript" src="jquery.svg.js"></script>
</head>
<body>
<div id="svgload" style="width: 100%; height: 300px;"></div>
<button type="button" id="color">Blue</button>
<script type="text/javascript">
$('#svgload').svg({onLoad: function(svg) {
svg.rect(10, 20, 150, 100, {id: 'rect1',
fill: 'red', stroke: 'black', strokeWidth: 3});
}
});
$("#color").click(function(){
var svg = $('#svgload').svg('get');
$('#rect1', svg.root()).attr('fill', 'blue');
});
</script>
</body>
</html>
Скачать пример
Список литературы:
Сайт плагина keith-wood.name/svg.html#examples
svnweb.blogspot.com/2009/12/jquery-svg.html
