Geekly Articles each Day
📜 ⬆️ ⬇️

jQuery SVG plugin

svg
Download plugin
jQuery plugin that allows you to interact with an SVG canvas. The latest version is 1.4.2 and is available under the MIT and GPL licenses.
Introduction
SVG is a scalable vector graphics markup language created by the World Wide Web Consortium (W3C) and included in a subset of the extensible XML markup language, designed to describe two-dimensional vector and mixed vector / raster graphics in XML format. It supports both motionless, animated and interactive graphics - or, in other terms, declarative and script. This is an open standard and is recommended by the W3C consortium, an organization that has developed standards such as HTML and XHTML. The basis of SVG lay down markup languages ​​VML and PGML.
Browser support
BrowserVersionsSupports
Internet Explorer8.0Not
Mozilla firefoxfrom 1.5 inclusive 3.0 and current 3.5Yes
Netscape navigator9.0Yes
Google chrome3.0Yes
Safari4.0Yes
Operafrom 8.0 including 9.5Yes



Example number 1:


In the <head> section
We connect the necessary files

<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>
')
Set the style for the div in which the result will be displayed
Set the style for the div in which the result will be, in the <head> section
<style> #svgintro {float: right; width: 150px; height: 150px; margin-right: 30px; background: #fff; border: 1px solid # 3c8243; } </ style>
In the <body> section
Create a div and button
<div id = "svgintro"> </ div>
<button type = "button" id = "remove"> Remove </ button>
In the <script type = "text / javascript"> section


writing javaScript code ....
We create a function drawIntro (svg) this function will be called when the page loads, and in this case draws a circle with a crosshair
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);
}
We hang the toggle event on the button for creating \ deleting a picture
$ ('# remove'). toggle (function () {
$ (this) .text ('Re-attach');
$ ('# svgintro'). svg ('destroy');
},
function () {
$ (this) .text ('Remove');
$ ('# svgintro'). svg ({onLoad: drawIntro});
});
$ ('# svgintro'). svg ({onLoad: drawIntro});

Close open tags and see what happened….

Full sample code

<! 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>

Download an example

Example number 2:


This wonderful plugin also allows you to load external SVG files with the following line $ ('# svgload'). Svg ({loadURL: 'lion.svg'});
$ ('# svgload') is the result layer
'lion.svg' is an external file, you can write the full path to the file
You can create an SVG file even in CorelDraw, even in the illustrator.
This is how it should look like:
as in the first example, we include the necessary files
In the <body> section create a div and and button
<div id = "svgload" style = "width: 100%; height: 300px;"> </ div>
<button type = "button" id = "addInline"> Picture </ button>

Further we write javaScript code
<script type = "text / javascript">
$ ("# addInline"). click (function () {
$ ('# svgload'). svg ({loadURL: 'lion.svg'});
});
</ script


Close the tags and see what happened.
Full code
<! 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>

Download an example


Example 3


SVG DOM
Now we draw the object and paint it. I will give the full code right away:
<! 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> Untitled Document </ 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>

Download an example

Bibliography:
Site plugin keith-wood.name/svg.html#examples
svnweb.blogspot.com/2009/12/jquery-svg.html

Source: https://habr.com/ru/post/78302/

More articles:


All Articles