プラグインをダウンロードする
SVGキャンバスと対話できるようにするjQueryプラグイン。 最新バージョンは1.4.2で、MITおよびGPLライセンスで利用できます。
はじめに
SVGは、World Wide Web Consortium（W3C）によって作成されたスケーラブルなベクターグラフィックマークアップ言語であり、XML拡張マークアップ言語のサブセットに含まれ、XML形式で2次元ベクターと混合ベクター/ラスターグラフィックを記述するように設計されています。 動きのない、アニメーション化された、インタラクティブなグラフィックスの両方をサポートします。つまり、宣言的でスクリプト化されています。 このオープン標準は、HTMLやXHTMLなどの標準を開発した組織であるW3Cコンソーシアムの推奨です。 SVGは、VMLおよびPGMLマークアップ言語に基づいています。
ブラウザのサポート
| ブラウザ | バージョン | サポート |
|---|---|---|
| インターネットエクスプローラー | 8.0 | いや |
| Mozilla Firefox | 3.0および現在の3.5を含む1.5から | はい |
| Netscapeナビゲーター | 9.0 | はい |
| Google Chrome | 3.0 | はい |
| サファリ | 4.0 | はい |
| オペラ | 9.5を含む8.0から | はい |
例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のスタイルを設定します
<head>セクションで、結果が含まれるdivのスタイルを設定します
<style> #svgintro {float：right; 幅：150px; 高さ：150px; マージン右：30px; 背景：#fff; border：1px solid＃3c8243; } </ style>
<body>セクション
divとボタンを作成する
<div id = "svgintro"> </ div>
<button type = "button" id = "remove">削除</ button>
<script type = "text / javascript">の下
javaScriptコードの記述...
関数drawIntro（svg）を作成します。この関数はページがロードされるときに呼び出され、この場合は十字線で円を描画します
関数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（関数（）{
$（this）.text（ 'Re-attach'）;
$（ '＃svgintro'）。svg（ 'destroy'）;
}、
関数（）{
$（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>
<スタイル>
#svgintro {float：right; 幅：150px; 高さ：150px; マージン右：30px; 背景：#fff; border：1px solid＃3c8243; }
</ style>
</ head>
<本体>
<div id = "svgintro"> </ div>
<button type = "button" id = "remove">削除</ button>
<script type = "text / javascript">
関数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（関数（）{
$（this）.text（ 'Re-attach'）;
$（ '＃svgintro'）。svg（ 'destroy'）;
}、
関数（）{
$（this）.text（ 'Remove'）;
$（ '＃svgintro'）。svg（{onLoad：drawIntro}）;
}）;
$（ '＃svgintro'）。svg（{onLoad：drawIntro}）;
</ script>
</ body>
</ html>
ダウンロード例
例2：
この素晴らしいプラグインでは、この$（ '＃svgload'）。のようなこの行で外部SVGファイルをロードすることもできます。Svg（{loadURL： 'lion.svg'}）;
$（ '＃svgload'）は結果レイヤーです
'lion.svg'は外部ファイルです。ファイルへのフルパスを指定できます
少なくともイラストレーターでは、少なくともCorelDrawでSVGファイルを作成できます。
外観は次のとおりです。
最初の例のように、必要なファイルを接続します
<body>セクションで、divとボタンを作成します
<div id = "svgload" style = "width：100％; height：300px;"> </ div>
<button type = "button" id = "addInline">写真</ button>
次に、javaScriptコードを記述します
<script type = "text / javascript">
$（ "＃addInline"）。クリック（関数（）{
$（ '＃svgload'）。svg（{loadURL： 'lion.svg'}）;
}）;
</スクリプト
タグを閉じて、何が起こったかを確認します。
完全なコード
<！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>
<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>
<本体>
<div id = "svgload" style = "width：100％; height：300px;">
</ div>
<button type = "button" id = "addInline">追加</ button>
<button type = "button" id = "clear1">クリア</ button>
<script type = "text / javascript">
$（ "＃addInline"）。クリック（関数（）{
$（ '＃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>
<本体>
<div id = "svgload" style = "width：100％; height：300px;"> </ div>
<button type = "button" id = "color">青</ button>
<script type = "text / javascript">
$（ '＃svgload'）。svg（{onLoad：function（svg）{
svg.rect（10、20、150、100、{id： 'rect1'、
塗りつぶし：「赤」、ストローク：「黒」、ストローク幅：3}）;
}
}）;
$（ "＃色"）。クリック（関数（）{
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