SVGベースのWebページグラフィック描画APIの紹介とプログラミングデモンストレーション

1: SVG とは
SVG は、1999 年に W3C によってリリースされた 2D グラフィックス記述言語です。純粋に XML 形式に基づいたマークアップ言語です。SVG
の正式名は、スケーラブルベクターグラフィックスです。グラフィックの形式 (JPG、PNG、GIF など) には大きな違いがあります
。 SVG は 2D グラフィックス開発プラットフォームであり、1 つは XML 言語に基づくデータ記述であり、もう 1 つはプログラム可能な API であり、その主な機能はグラフィックス、テキスト、グラデーション塗りつぶし、ブラシスタイル、グラフィックスをサポートします
特殊効果。ガウスぼかしなどのフィルターは、後のコードで説明します。さまざまなマウスイベントや DOM 部分
API もサポートしています。ほとんどすべての主流ブラウザは SVG グラフィック形式のレンダリングをサポートしており、IE の以前のバージョンではプラグインのサポートが必要になります。
SVG の詳細については、こちらをご覧ください: http://www.w3.org/Graphics/SVG/About.html

2: JavaScript での SVG API プログラミングのデモ
SVG オブジェクトの作成と取得

コードのコピーコードは次のとおりです:

// svg オブジェクトを作成します

var mySvg = document.createElementNS("http://www.w3.org/2000/svg","svg"); 
mySvg.setAttribute("version","1.2"); // IE9 は SVG 1.1 バージョンをサポートします 
mySvg.setAttribute("baseProfile","tiny"); 
container.appendChild(mySvg); 

 
SVG で長方形を作成します: 

コードをコピーしますコードは次のとおりです。

var c1 = document.createElementNS("http: //www.w3.org /2000/svg","rect");

c1.setAttribute("x","20"); 
c1.setAttribute("y","20"); 
c1.setAttribute( "幅","150"); 
c1.setAttribute("高さ","150"); 
c1.setAttribute("fill","rgb(0,0,255)) "); 
c1 .setAttribute("ストローク","rgb(0,0,0)"); 
c1.setAttribute("ストローク幅","4"); 
mySvg.appendChild (c1); 
 
 
 SVG でテキスト描画を実装します: 

コードをコピーコードは次のとおりです。 :

// SVG 描画テキスト

var stext = document.createElementNS("http://www.w3.org/2000/svg","text"); .setAttribute("x","700 "); 
stext.setAttribute("y","100"); 
stext.setAttribute("font-size","18px"); .setAttribute("fill","# FF0000"); 
var textString = document.createTextNode("Hello SVG"); 
stext.appendChild(textString); 🎜>
 
at SVG オブジェクトにマウス クリック イベント処理と MouseUp イベント処理を実装します: 

コードをコピー

コード // マウスイベント処理 c1.addEventListener("click",changeColor,false); c2.addEventListener("mouseup",changeColor,false);

SVG グラフィックス フィルターを使用してガウスぼかしを実装します: 

コードをコピー

コードは次のとおりです。

 
 画像 x="0" y="0" width="325 " height="471" xlink:href="woniu.png" filter="url(#f1)"/> 
 

ソースコード、直接コピーして実行できます
JavaScriptパート

コードをコピー

コードは次のとおりです:

 
window.onload = function() { 
// DIV を取得 
varcontainer = document.getElementById("svgContainer"); 
// svg オブジェクトを作成します 
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
mySvg.setAttribute("version", "1.2");// IE9 は SVG 1.1 バージョンをサポート 
mySvg.setAttribute("baseProfile", "tiny"); 
container.appendChild(mySvg); 

// SVG シェイプを作成します - 長方形 
var c1 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
c1.setAttribute("x", "20"); 
c1.setAttribute("y", "20"); 
c1.setAttribute("幅", "150"); 
c1.setAttribute("高さ", "150"); 
c1.setAttribute("fill", "rgb(0,0,255)"); 
c1.setAttribute("ストローク", "rgb(0,0,0)"); 
c1.setAttribute("ストローク幅", "4"); 
mySvg.appendChild(c1); 

// SVG シェイプを作成 - サークル 
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
c2.setAttribute("cx", "250"); 
c2.setAttribute("cy", "100"); 
c2.setAttribute("r", "60"); 
c2.setAttribute("fill", "#996699"); 
c2.setAttribute("ストローク", "#AA99FF"); 
c2.setAttribute("ストローク幅", "7"); 
mySvg.appendChild(c2); 

// SVG シェイプを作成 - 楕円 
var c3 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse"); 
c3.setAttribute("cx", "450"); 
c3.setAttribute("cy", "100"); 
c3.setAttribute("rx", "100"); 
c3.setAttribute("ry", "50"); 
c3.setAttribute("fill", "#FF0000"); 
c3.setAttribute("ストローク", "紫"); 
c3.setAttribute("ストローク幅", "3"); 
mySvg.appendChild(c3); 

// SVG シェイプを作成 - 線を描画 
for(var i=0; i<10; i ) 
{ 
var sline = document.createElementNS("http://www .w3.org/2000/svg", "行"); 
var x1 = 580 i*10; 
console.log(x1); 

sline.setAttribute("x1", x1.toString()); 
sline.setAttribute("y1", "10"); 
sline.setAttribute("x2", x1.toString()); 
sline.setAttribute("y2", "180"); 
sline.setAttribute("ストローク", "rgb(0,255,0)"); 
sline.setAttribute("ストローク幅", "2"); 
mySvg.appendChild(sline); 
} 

// SVG 描画テキスト 
var stext = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
stext.setAttribute("x", "700"); 
stext.setAttribute("y", "100"); 
stext.setAttribute("font-size", "18px"); 
stext.setAttribute("fill", "#FF0000"); 
var textString = document.createTextNode("Hello SVG"); 
stext.appendChild(textString); 
mySvg.appendChild(stext); 

// マウスイベント処理 
c1.addEventListener("click",changeColor,false); 
c2.addEventListener("mouseup", changeColor, false); 
}; 
関数 changeColor(evt) { 
var target = evt.target; 
target.setAttributeNS(null, "fill", "green"); 
} 