blob: 343a468a5b834bd48ef07a3a2854015913dbd658 (
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
|
---
title: 入门
slug: Web/SVG/Tutorial/Getting_Started
tags:
- SVG
- SVG教程
- 起步
translation_of: Web/SVG/Tutorial/Getting_Started
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
<h3 id="A_Simple_Example" name="A_Simple_Example">一个简单的示例</h3>
<p>让我们直接从一个简单的例子开始,看一下下面代码:</p>
<pre class="brush: xml"><svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
</pre>
<p>复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。(Firefox用户点击<a href="https://mdn.mozillademos.org/files/3075/svgdemo1.xml">这里</a>)</p>
<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
<p>绘制流程包括以下几步:</p>
<ol>
<li>从<code>svg</code>根元素开始:
<ul>
<li>应舍弃来自 (X)HTML的doctype声明,因为基于SVG的DTD验证导致的问题比它能解决的问题更多。</li>
<li>SVG 2之前,version属性和baseProfile属性用来供其他类型的验证识别SVG的版本。SVG 2不推荐使用version和baseProfile这两个属性。</li>
<li>作为XML的一种方言,SVG必须正确的绑定命名空间 (在xmlns属性中绑定)。 请阅读<a href="https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course">命名空间速成</a> 页面获取更多信息。</li>
</ul>
</li>
<li>绘制一个完全覆盖图像区域的矩形 <code><a href="/en/SVG/Element/rect" title="en/SVG/Element/rect"><rect/></a>,</code>把背景颜色设为红色。</li>
<li><code><font face="Open Sans, sans-serif">一个半径80px的绿色圆圈</font><a href="/en/SVG/Element/circle" title="en/SVG/Element/circle"><circle/></a></code>绘制在红色矩形的正中央 (向右偏移150px,向下偏移100px)。</li>
<li>绘制文字“SVG”。文字被填充为白色, 通过设置居中的锚点把文字定位到期望的位置:在这种情况下,中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置,确保最后的样式是美观的。</li>
</ol>
<h3 id="SVG文件的基本属性">SVG文件的基本属性</h3>
<ul>
<li>最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”,越后面的元素越可见。</li>
<li>web上的svg文件可以直接在浏览器上展示,或者通过以下几种方法嵌入到HTML文件中:
<ul>
<li>如果HTML是XHTML并且声明类型为<code>application/xhtml+xml,</code>可以直接把SVG嵌入到XML源码中。</li>
<li>如果HTML是HTML5并且浏览器支持HTML5,同样可以直接嵌入SVG。然而为了符合HTML5标准,可能需要做一些语法调整。</li>
<li>可以通过 <code>object</code> 元素引用SVG文件:
<pre> <object data="image.svg" type="image/svg+xml" /></pre>
</li>
<li>类似的也可以使用 <code>iframe</code> 元素引用SVG文件:
<pre> <iframe src="image.svg"></iframe></pre>
</li>
<li>理论上同样可以使用 <code>img</code> 元素,但是在低于4.0版本的Firefox 中不起作用。</li>
<li>最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点,可以对浏览器使用替代技术,在不能解析SVG的情况下,可以替换创建的内容。</li>
</ul>
阅读<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">this dedicated article</a> 以深入了解该话题。</li>
<li>SVG如何处理大小和单位将在<a href="https://developer.mozilla.org/zh-cn/docs/Web/SVG/Tutorial/Positions">下一页</a>详解。</li>
</ul>
<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 文件类型</h3>
<p>SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”(全部小写)作为此类文件的扩展名。</p>
<p>由于在某些应用(比如地图应用等)中使用时,SVG文件可能会很大,SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”(全部小写)作为此类文件扩展名 。不幸的是,如果服务器是微软的IIS服务器,使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的,而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip,否则要避免使用gzip压缩的SVG。</p>
<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">关于web服务器的小提示</h3>
<p>如果你已经知道了如何创建基本SVG文件,下一步就是把它们上传到web服务器,但是在这阶段有一些陷阱。对于普通SVG文件,服务器应该会发送下面的HTTP头:</p>
<pre>Content-Type: image/svg+xml
Vary: Accept-Encoding</pre>
<p>对于gzip压缩的SVG文件,服务器应该会发送下面的HTTP头:</p>
<pre>Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding</pre>
<p>可以利用<a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a>或者<a class="external" href="http://web-sniffer.net/" style="line-height: 1.5;">web-sniffer.net</a>之类的网站来检查服务器是否给SVG文件发送正确的HTTP头,向<a href="http://web-sniffer.net/">web-sniffer.net</a>提交你的一个SVG文件的链接,然后查看HTTP 响应头。如果发现服务器没有发送上述的响应头部值,那么你应该联系你的服务器供应商。<span style="line-height: 1.5;">如果不能说服他们为SVG修正服务器配置,可能还有一些我们可以自行解决的办法。 请阅读SVG维基的</span><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration" style="line-height: 1.5;">server configuration page</a>以找到一些简单的解决方案。</p>
<p>服务器配置错误是SVG加载失败的常见原因,所以一定要确保你的服务器配置正确。如果不能把服务器配置成给SVG文件发送正确的响应头,这时Firefox很有可能把该文件的标记显示成文本或乱码,甚至会要求查看者选择打开文件的应用程序。</p>
<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
<p>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p>
|