SVGベースのWebページグラフィック描画APIの紹介とプログラミングデモンストレーション_JavaScriptスキル
svg
グラフィック描画
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 は、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 で長方形を作成します:
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 でテキスト描画を実装します:
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 イベント処理を実装します:
コードをコピー 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 グラフィックス フィルターを使用してガウスぼかしを実装します:
コードをコピー コードは次のとおりです。 
ソースコード、直接コピーして実行できます
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");
}
HTML 部分：
Gloomyfish SVG デモ
#svgContainer {
width:800px;
高さ:200ピクセル;
背景色:#EEEEEE;
}
#left { float: left;}
#right { float: right;}
ソースコード、直接コピーして実行できます
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");
}
HTML 部分：
复制代代码如下:
#svgContainer {
width:800px;
高さ:200ピクセル;
背景色:#EEEEEE;
}
#left { float: left;}
#right { float: right;}