blob: 5e39b526431530984bc69d862b7d0732fd1796b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: SVG In HTML Introduction
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
tags:
- Intermediate
- NeedsUpdate
- SVG
- 中級者
translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
<h2 id="Overview" name="Overview">概要</h2>
<p>この記事と関連する例では、インラインの <a href="/ja/docs/SVG">SVG</a> をフォームの背景画像として使用する方法を示します。どのように <a href="/ja/docs/JavaScript">JavaScript</a> と <a href="/ja/docs/CSS">CSS</a> を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。</p>
<h2 id="Source" name="Source">ソース</h2>
<p>こちらに<a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">この例</a>のソースがあります。</p>
<pre class="brush: html"><html>
<head>
<title>XTech SVG Demo</title>
<style>
stop.begin { stop-color:yellow; }
stop.end { stop-color:green; }
body.invalid stop.end { stop-color:red; }
#err { display:none; }
body.invalid #err { display:inline; }
</style>
<script>
function signalError() {
document.getElementById('body').setAttribute("class", "invalid");
}
</script>
</head>
<body id="body"
style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
<fieldset>
<legend>HTML Form</legend>
<p><label>Enter something:</label>
<input type="text">
<span id="err">Incorrect value!</span></p>
<p><input type="button" value="Activate!" onclick="signalError();"></p>
</fieldset>
</form>
<svg
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>
</pre>
<h2 id="Discussion" name="Discussion">議論</h2>
<p>ページは主に通常の HTML, CSS, JavaScript を使用しています。唯一興味深いのは、その中に含まれている <svg> 要素です。この要素とその子は SVG 名前空間にあると宣言されています。この要素にはグラデーションと、グラデーションで塗りつぶされた2つの図形が含まれています。グラデーションの色停止点の色は CSS で設定されています。ユーザーがフォームに何か間違ったものを入力すると、スクリプトは <body> に <code>invalid</code> 属性を設定し、スタイル規則はグラデーションの <code>end-stop</code> の色を赤に変更します (別のスタイル規則によりエラーメッセージが表示されます)。</p>
<p>この方法は、以下のいくつかの点で有利です。</p>
<ul>
<li>既存のサイトに含まれる通常の HTML フォームに対して、魅力のある対話式の背景を設定できます。</li>
<li>SVG に対応していないブラウザーに対しても後方互換性があります。単純に背景が表示されないだけです。</li>
<li>単純ながら、非常に効率的です。</li>
<li>画像のサイズは動的に気の効いた方法で必要なサイズに変更されます。</li>
<li>HTML と SVG の双方に適用するスタイルを宣言できます。</li>
<li>同一のスクリプトで HTML と SVG の双方を操作できます。</li>
<li>文書は、完全に標準準拠です。</li>
</ul>
<div class="note">
<p>DOM メソッドでリンクした画像を組み込まれた SVG 要素に追加するには、<code>href</code> の設定に <code>setAttributeNS</code> を使用してください。次の例のようにします:</p>
<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
</pre>
</div>
<h2 id="Details" name="Details">詳細</h2>
<p><code>viewBox</code> 属性は、SVG 画像の座標と相対的な論理座標系を構築します。この場合、画像は 100 対 100 で貼り付けられます。</p>
<p><code>preserveAspectRatio</code> 属性は、画像のアスペクト比を保ったまま、中心にそのままのサイズの画像を配置し、縦横ではみ出した部分を除きます。</p>
<p><code>style</code> 属性はフォームの背景になる SVG 要素を指します。</p>
<h2 id="Related_Links" name="Related_Links">関連リンク</h2>
<ul>
<li>他の SVG in HTML の例: <a href="/ja/docs/SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
<li><a class="external" href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> は、Mozilla と Adobe の SVG Viewer がインストールされた Internet Explorer の両方で動作します。(インライン SVG を Firefox と Internet Explorer の両方で動作させるには、ブラウザごとに異なる Content-Type のドキュメントを提供する必要があります。このため、ページをキャッシュするプロクシサーバに接続している場合は、サンプルを二回目に読み込んだブラウザでは間違った Content-Type を受け取るため、動作しないことがあります。)</li>
</ul>
|
