JQuery SVG

Введение в jQuery SVG

To use the jQuery SVG plugin include the CSS and the Javascript in the head section of your page. Для использования jQuery SVG plugin включите CSS и Javascript в заголовок страницы

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

Also include any extension packages you may want to use. For example: Так же можно использовать и расширения. Например:

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

Attach an SVG canvas to a

with the following: Прикрепить область SVG к блоку

можно следующим образом:

$(selector).svg();

You can pass additional parameters to this call as described below. Вы можете пропустить добавление параметров как описано ниже: Then, once loaded, retrieve the SVG instance and start working with it: Тогда, однажды загрузив, возьмите пример SVG и работайте с ним

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

Some general notes on the JavaScript implementation:

Additional settings that contain a dash (-) in SVG should be written in camel-case without the dash. Settings that are reserved words in JavaScript must be followed by an underscore. For example, attributes stroke-width and class become:

svg.line(10, 10, 90, 90, 
   {stroke: 'blue', strokeWidth: 2, class_: 'myline'});

For IE, a blank SVG document is initially loaded that registers itself with the plugin and allows access to its internal structure. This is the blank.svg document. Because of this, you must wait for the document to be loaded before accessing the SVG instance and using it. Use the onLoad setting to be notified when loading is complete. Additional parameters may be passed to the initial attachment call.

Список доступных полей и функций.

Подробная документация на англ. оригинал

$(selector).svg()

$(selector).svg({

   loadURL: , // External document to load 
   onLoad: null, // Callback once loaded 
   settings: {}, // Additional settings for SVG element 
   initPath: }) // Initial path for blank document 

$(selector).svg(loadURL)

$(selector).svg(onLoad)

$(selector).svg('get')

// Retrieve SVG wrapper

$(selector).svg('destroy')

// Remove SVG functionality

$.svg.addExtension(name, extClass)

// Extend SVG functionality

$.svg.isSVGElem(node)

svg.root()

svg.configure(node, settings, clear)

svg.getElementById(id)

svg.change(element, settings)

svg.title(parent, text, settings)

svg.describe(parent, text, settings)

svg.defs(parent, id, settings)

svg.symbol(parent, id, x1, y1, width, height, settings)

svg.marker(parent, id, refX, refY, mWidth, mHeight, orient, settings)

svg.style(parent, styles, settings)

svg.script(parent, script, type, settings)

svg.linearGradient(parent, id, stops, x1, y1, x2, y2, settings)

svg.radialGradient(parent, id, stops, cx, cy, r, fx, fy, settings)

svg.pattern(parent, id, x, y, width, height, vx, vy, vwidth, vheight, settings)

svg.clipPath(parent, id, units, settings)

svg.mask(parent, id, x, y, width, height, settings)

svg.createPath()

svg.createText()

svg.svg(parent, x, y, width, height, vx, vy, vwidth, vheight, settings)

svg.group(parent, id, settings)

svg.use(parent, x, y, width, height, ref, settings)

svg.link(parent, ref, settings)

svg.image(parent, x, y, width, height, ref, settings)

svg.path(parent, path, settings)

svg.rect(parent, x, y, width, height, rx, ry, settings)

svg.circle(parent, cx, cy, r, settings)

svg.ellipse(parent, cx, cy, rx, ry, settings)

svg.line(parent, x1, y1, x2, y2, settings)

svg.polyline(parent, points, settings)

svg.polygon(parent, points, settings)

svg.text(parent, x, y, value, settings)

svg.textpath(parent, path, value, settings)

svg.other(parent, name, settings)

svg.add(parent, node)

svg.clone(parent, node)

svg.load(url, settings)

svg.remove(node)

svg.clear(attrsToo)

svg.toSVG(node)

path.reset()

path.move(x, y, relative)

path.line(x, y, relative)

path.horiz(x, relative)

path.vert(y, relative)

path.curveC(x1, y1, x2, y2, x, y, relative)

path.smoothC(x2, y2, x, y, relative)

path.curveQ(x1, y1, x, y, relative)

path.smoothQ(x, y, relative)

path.arc(rx, ry, xRotate, large, clockwise, x, y, relative)

path.close()

path.path()

text.reset()

text.string(value)

text.span(value, settings)

text.ref(id, settings)

text.path(id, value, settings)

• пример работы с SVG