blob: a29b85a1da6668f3d1698d3804e9b8bbdebe62c0 (
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
|
---
title: SVG In HTML Introduction
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
tags:
- SVG
translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
<h2 id="Overview" name="Overview">概述</h2>
<p>本文及其相关示例展示了如何使用内联的 <a href="/zh-CN/docs/SVG" title="SVG">SVG</a> 给一个表单提供背景图片，它展示了如何按照编写常规XHTML代码相同的方式来通过<a href="/zh-CN/docs/JavaScript" title="JavaScript">JavaScript</a> 和 <a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 操作图片。注意，该示例仅在支持XHTML（非HTML）并集成了SVG的浏览器中正常工作。</p>
<h2 id="Source" name="Source">源码</h2>
<p>源码如下： <a class="external external-icon" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">查看示例</a></p>
<pre><html xmlns="http://www.w3.org/1999/xhtml">
<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 xmlns="http://www.w3.org/2000/svg" version="1.1"
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>该页面主要是常规的XHTML、CSS和Javascript，唯一有趣的部分就是包含了<svg>元素。该元素及其子元素都被声明在SVG的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由CSS设置，当用户在表单中输入了错误信息，脚本会给<body>设置一个<code>invalid</code>属性，样式规则将渐变颜色的<code>end-stop</code>颜色设置为红色（另一个样式规则用于展示错误提示信息）</p>
<p>该方法有如下几点需要注意：</p>
<ul>
<li>我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景</li>
<li>该方法通过不展示背景图片的方式，向后兼容了不支持SVG的浏览器</li>
<li>它非常简单且运行良好</li>
<li>这个图片能够智能的自动适应其需要的大小</li>
<li>我们可以给HTML和SVG都显式声明样式规则</li>
<li>相同的脚本同时操作了HTML和SVG</li>
<li>该文档完全符合标准</li>
</ul>
<div class="note">
<p>如果需要给一个内嵌的SVG元素通过DOM方法添加一个有外链的图片，我们需要使用 <code>setAttributeNS</code> 来设置外链地址 <code>href</code>. 示例如下:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/2000/svg"</span><span class="punctuation token">,</span> <span class="string token">"image"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
img<span class="punctuation token">.</span><span class="function token">setAttributeNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/1999/xlink"</span><span class="punctuation token">,</span> <span class="string token">"xlink:href"</span><span class="punctuation token">,</span> <span class="string token">"move.png"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
</pre>
</div>
<h2 id="Details" name="Details">细节</h2>
<p>viewBox属性创建了一个与SVG图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个100x100的视觉系中。</p>
<p><code>preserveAspectRatio属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。</code></p>
<p>样式属性指定了SVG在form背景中的位置。</p>
<h2 id="Related_Links" name="Related_Links">相关链接</h2>
<ul>
<li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
<li><a href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> 可以同时工作在安装有Adobe SVG Viwer的Mozilla和IE浏览器中。 （对于同时工作在Firefox和IE浏览器中得内联SVG，需要为每个浏览器的服务文档设置不同的Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的Content-Type）</li>
</ul>
|
