SVG-クイックガイド
SVGとは何ですか？
SVG、Scalable Vector Graphicsは、ベクターベースのグラフィックスを定義するためのXMLベースの言語です。
SVGは、Web上に画像を表示することを目的としています。
SVG画像はベクター画像であるため、ズームアウトやサイズ変更を行っても品質が低下することはありません。
SVG画像はインタラクティブ性とアニメーションをサポートしています。
SVGはW3C標準です。
ラスター画像のような他の画像形式もSVG画像と組み合わせることができます。
SVGは、HTMLのXSLTおよびDOMとうまく統合されます。
利点
任意のテキストエディタを使用して、SVG画像を作成および編集します。
XMLベースであるため、SVG画像は検索、インデックス作成が可能で、スクリプト化および圧縮できます。
SVG画像は、ズームアウトやサイズ変更に関係なく品質が低下しないため、拡張性が高くなっています。
あらゆる解像度で優れた印刷品質
SVGはオープンスタンダードです
短所
テキスト形式のサイズは、バイナリ形式のラスター画像に比べて大きくなります。
小さい画像でもサイズが大きくなることがあります。
例
次のXMLスニペットを使用して、Webブラウザーで円を描くことができます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>SVGXMLをHTMLページに直接埋め込みます。
testSVG.htm
<html>
<title>SVG Image</title>
<body>
<h1>Sample SVG Image</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorerでは、SVG画像を表示するにはActiveXコントロールが必要です。
SVGとHTMLの統合方法
<svg>要素はSVG画像の開始を示します。
<svg>要素のwidth属性とheight属性は、SVG画像の高さと幅を定義します。
上記の例では、<circle>要素を使用して円を描画しました。
cxおよびcy属性は、円の中心を表します。デフォルト値は（0,0）です。r属性は円の半径を表します。
その他の属性ストロークとストローク幅は、円の輪郭を制御します。
fill属性は、円の塗りつぶしの色を定義します。
Closing </ svg>タグは、SVG画像の終わりを示します。
SVGは、画像の描画に使用できるさまざまな形状を提供します。一般的な形状は次のとおりです。
| シニア番号 | 形状の種類と説明 |
|---|---|
| 1 | 長方形 長方形を描くために使用されます。 |
| 2 | サークル 円を描くために使用されます。 |
| 3 | 楕円 楕円を描くために使用されます。 |
| 4 | ライン 線を引くために使用されます。 |
| 5 | ポリゴン 接続された直線で構成される閉じた形状を描画するために使用されます。 |
| 6 | ポリライン 接続された直線で構成される開いた形状を描画するために使用されます。 |
| 7 | 道 パスを描画するために使用されます。 |
<text>要素はテキストの描画に使用されます。
宣言
以下はの構文宣言です <text>素子。主な属性のみを示しました。
<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>属性
| シニア番号 | 属性と説明 |
|---|---|
| 1 | x −グリフのx軸座標。 |
| 2 | y −グリフのy軸座標。 |
| 3 | dx −x軸に沿ってシフトします。 |
| 4 | dy −y軸に沿ってシフトします。 |
| 5 | rotate −すべてのグリフに適用される回転。 |
| 6 | textlength −テキストのレンダリング長。 |
| 7 | lengthAdjust −レンダリングされたテキストの長さによる調整のタイプ。 |
例
testSVG.htm<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
回転したテキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
複数行のテキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
ハイパーリンクテキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</a>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
SVGは複数のストロークプロパティをサポートしています。
使用される主なストロークプロパティは次のとおりです。
| シニア番号 | ストロークの種類と説明 |
|---|---|
| 1 | stroke −任意の要素のテキスト、線、またはアウトラインの色を定義します。 |
| 2 | stroke-width −要素のテキスト、線、またはアウトラインの太さを定義します。 |
| 3 | stroke-linecap −任意のパスの線またはアウトラインのさまざまなタイプの終了を定義します。 |
| 4 | stroke-dasharray −破線を作成するために使用されます。 |
例
testSVG.htm<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50" />
<path stroke="green" d="M 50 70 L 300 70" />
<path stroke="blue" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
ストローク幅
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
ストロークラインキャップ
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-linecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-linecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
ストローク-dasharray
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
SVGは<filter>要素を使用してフィルターを定義します。<filter>要素はid属性を使用して一意に識別します。フィルターは<def>要素内で定義され、グラフィック要素によってIDによって参照されます。
SVGは豊富なフィルターセットを提供します。以下は、一般的に使用されるフィルターのリストです。
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset-ドロップシャドウのフィルター
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
宣言
以下はの構文宣言です <filter>素子。主な属性のみを示しました。
<filter
filterUnits="units to define filter effect region"
primitiveUnits="units to define primitive filter subregion"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
filterRes="numbers for filter region"
xlink:href="reference to another filter" >
</filter>属性
| シニア番号 | 名前と説明 |
|---|---|
| 1 | filterUnits−フィルター効果領域を定義する単位。フィルタ内のさまざまな長さの値と、フィルタのサブ領域を定義する属性の座標系を指定します。filterUnits = "userSpaceOnUse"の場合、値は、「filter」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。filterUnits = "objectBoundingBox"の場合、値は、「filter」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 2 | primitiveUnits−フィルター効果領域を定義する単位。フィルタ内のさまざまな長さの値と、フィルタのサブ領域を定義する属性の座標系を指定します。filterUnits = "userSpaceOnUse"の場合、値は、「filter」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。filterUnits = "objectBoundingBox"の場合、値は、「filter」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 3 | x−フィルター境界ボックスのx軸座標。Defeaultは0です。 |
| 4 | y−フィルター境界ボックスのy軸座標。デフォルトは0です。 |
| 5 | width−フィルター境界ボックスの幅。デフォルトは0です。 |
| 6 | height−フィルターバウンディングボックスの高さ。デフォルトは0です。 |
| 7 | filterRes −フィルター領域を表す数値。 |
| 8 | xlink:href −別のフィルターを参照するために使用されます。 |
例
testSVG.htm<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Blur Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter1)" />
</g>
</svg>
</body>
</html>filter1およびfilter2として定義された2つの<filter>要素。
feGaussianBlurフィルター効果は、stdDeviationを使用して、ぼかしの量でぼかし効果を定義します。
in = "SourceGraphic"は、効果が要素全体に適用可能であることを定義します。
feOffsetフィルター効果は、シャドウ効果を作成するために使用されます。in = "SourceAlpha"は、エフェクトがRGBAグラフィックのアルファ部分に適用可能であることを定義します。
<rect>要素は、filter属性を使用してフィルターをリンクしました。
出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
シャドウ効果でフィルタリング
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Shadow Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter2)" />
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
SVGは<pattern>要素を使用してパターンを定義します。パターンは<pattern>要素を使用して定義され、グラフィック要素をタイル状に塗りつぶすために使用されます。
宣言
以下はの構文宣言です <pattern>素子。主な属性のみを示しました。
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>属性
| シニア番号 | 名前と説明 |
|---|---|
| 1 | patternUnits−パターン効果領域を定義する単位。これは、パターン内のさまざまな長さの値と、パターンのサブ領域を定義する属性の座標系を指定します。patternUnits = "userSpaceOnUse"の場合、値は、「pattern」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternUnits = "objectBoundingBox"の場合、値は、「pattern」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 2 | patternContentUnits−パターンコンテンツ領域を定義する単位。これは、パターン内のさまざまな長さの値と、パターンのサブ領域を定義する属性の座標系を指定します。patternContentUnits = "userSpaceOnUse"の場合、値は、「pattern」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternContentUnits = "objectBoundingBox"の場合、値は、「pattern」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 3 | x−パターン境界ボックスのx軸座標。Defeaultは0です。 |
| 4 | y−パターン境界ボックスのy軸座標。デフォルトは0です。 |
| 5 | width−パターン境界ボックスの幅。デフォルトは0です。 |
| 6 | height−パターン境界ボックスの高さ。デフォルトは0です。 |
| 7 | preserveAspectRatio -元のコンテンツの幅/高さの比率を維持します。 |
| 8 | xlink:href −別のパターンを参照するために使用されます。 |
例
testSVG.htm<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>pattern1として定義された1つの<pattern>要素。
パターンでは、ビューボックスが定義され、パターンとして使用されるパスが定義されます。
rect要素のfill属性では、パターンのurlを指定して、以前に作成したパターンで長方形を塗りつぶします。
出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
グラデーションとは、図形内のある色から別の色へのスムーズな移行を指します。SVGは2種類のグラデーションを提供します。
Linear Gradients −ある方向から別の方向へのある色から別の色への線形遷移を表します。
Radial Gradients −ある方向から別の方向へのある色から別の色への循環遷移を表します。
線形勾配
宣言
以下はの構文宣言です <linearGradient>素子。主な属性のみを示しました。
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</linearGradient>属性
| シニア番号 | 名前と説明 |
|---|---|
| 1 | gradientUnits−グラデーション内のさまざまな長さ値の座標系を定義する単位。gradientUnits = "userSpaceOnUse"の場合、値は、gradient要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternContentUnits = "objectBoundingBox"の場合、値は、グラデーション要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 2 | x1−勾配ベクトルのx軸座標。Defeaultは0です。 |
| 3 | y1−勾配ベクトルのy軸座標。デフォルトは0です。 |
| 4 | x2−勾配ベクトルのx軸座標。Defeaultは0です。 |
| 5 | y2−勾配ベクトルのy軸座標。デフォルトは0です。 |
| 6 | spreadMethod−グラフィック要素内でグラデーションを広げる方法を示します。デフォルトは「パッド」です。 |
| 7 | xlink:href −別のグラデーションを参照するために使用されます。 |
例
testSVG.htm<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>sampleGradientとして定義された1つの<linearGradient>要素。
linearGradientでは、2つのオフセットが2つの色で定義されます。
rect要素のfill属性では、先に作成したグラデーションで長方形を塗りつぶすために、グラデーションのURLが指定されます。
出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
放射状グラデーション
宣言
以下はの構文宣言です <radialGradient>素子。主な属性のみを示しました。
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</radialGradient>属性
| シニア番号 | 名前と説明 |
|---|---|
| 1 | gradientUnits−グラデーション内のさまざまな長さ値の座標系を定義する単位。gradientUnits = "userSpaceOnUse"の場合、値は、gradient要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternContentUnits = "objectBoundingBox"の場合、値は、グラデーション要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。 |
| 2 | cx−勾配ベクトルの最大円の中心のx軸座標。Defeaultは0です。 |
| 3 | cy−勾配ベクトルの最大円の中心のy軸座標。デフォルトは0です。 |
| 4 | r−勾配ベクトルの最大円の中心の半径。Defeaultは0です。 |
| 5 | fx−放射状勾配の焦点。デフォルトは0です。 |
| 6 | fy−放射状勾配の焦点。デフォルトは0です。 |
| 7 | spreadMethod−グラフィック要素内でグラデーションを広げる方法を示します。デフォルトは「パッド」です。 |
| 8 | xlink:href −別のグラデーションを参照するために使用されます。 |
例
testSVG.htm<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>sampleGradientとして定義された1つの<radialGradient>要素。
radiusGradientでは、2つのオフセットが2つの色で定義されます。
rect要素のfill属性では、先に作成したグラデーションで長方形を塗りつぶすために、グラデーションのURLが指定されます。
出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。
SVG画像は、ユーザーの操作に反応するようにすることができます。SVGは、ポインターイベント、キーボードイベント、およびドキュメントイベントをサポートします。次の例を考えてみましょう。
例
testSVG.htm<html>
<title>SVG Interactivity</title>
<body>
<h1>Sample Interactivity</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="green" stroke-width="3" fill="red"
onClick="showArea(event)"/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click me to print child node count.</text>
</g>
</svg>
</body>
</html>説明
SVGはJavaScript / ECMAScript関数をサポートしています。スクリプトブロックはCDATAブロックに含める必要があり、XMLでの文字データのサポートを検討してください。
SVG要素は、マウスイベント、キーボードイベントをサポートします。onClickイベントを使用してjavascript関数を呼び出しました。
javascript関数では、documentはSVGドキュメントを表し、SVG要素を取得するために使用できます。
javascript関数では、eventは現在のイベントを表し、イベントが発生したターゲット要素を取得するために使用できます。
出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。各テキストと長方形をクリックして、結果を確認します。
<a>要素はハイパーリンクを作成するために使用されます。「xlink：href」属性は、URI（Uniform Resource Identifiers）を補完するIRI（Internationalized Resource Identifiers）を渡すために使用されます。
宣言
以下はの構文宣言です <a>素子。主な属性のみを示しました。
<a
xlink:show = "new" | "replace"
xlink:actuate = "onRequest"
xlink:href = "<IRI>"
target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>属性
| シニア番号 | 名前と説明 |
|---|---|
| 1 | xlink:show−XLink対応プロセッサのドキュメント化を目的としています。デフォルトは新規です。 |
| 2 | xlink:actuate −XLink対応プロセッサのドキュメント化を目的としています。 |
| 3 | xlink:href −参照されるオブジェクトの場所。 |
| 4 | target −終了リソースのターゲットが可能な場合に使用されます。 |
例
testSVG.htm<html>
<title>SVG Linking</title>
<body>
<h1>Sample Link</h1>
<svg width="800" height="800">
<g>
<a xlink:href="http://www.tutorialspoint.com">
<text x="0" y="15" fill="black" >
Click me to load TutorialsPoint DOT COM.</text>
</a>
</g>
<g>
<text x="0" y="65" fill="black" >
Click in the rectangle to load TutorialsPoint DOT COM</text>
<a xlink:href="http://www.tutorialspoint.com">
<rect x="100" y="80" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" />
</a>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。リンクと長方形をクリックして結果を確認します。