blob: 9726ef006aa0e0c985ba6cad2c4811705522eb3f (
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
|
---
title: SVG教程
slug: Web/SVG/Tutorial
tags:
- SVG
- SVG教程
- 中间体
- 需要内容
- 需要帮助
- 需要更新
translation_of: Web/SVG/Tutorial
---
<p>可缩放矢量图形，即<a href="/zh-CN/SVG" title="zh-CN/SVG">SVG</a>，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。</p>
<p>本教程旨在解释SVG内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在<a class="external" href="http://inkscape.org/doc/">Inkscape的文档页面</a>上获取更多有用的资源。另外还有一个比较好的SVG介绍：<a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C的SVG入门</a>。</p>
<div class="note">本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！</div>
<h5 id="从头开始介绍SVG">从头开始介绍SVG</h5>
<ul>
<li><a href="/zh-CN/Web/SVG/Tutorial/Introduction" title="zh-CN/SVG/Tutorial/Introduction">引言</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Getting_Started" title="zh-CN/SVG/Tutorial/Getting_Started">入门</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Positions" title="zh-CN/SVG/Tutorial/Positions">坐标定位</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Shapes" title="zh-CN/SVG/Tutorial/Basic_Shapes">基本形状</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Paths" title="zh-CN/SVG/Tutorial/Paths">路径</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes" title="zh-CN/SVG/Tutorial/Fills_and_Strokes">填充与边框</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Gradients" title="zh-CN/SVG/Tutorial/Gradients">渐变</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Patterns" title="zh-CN/SVG/Tutorial/Patterns">图案</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Texts" title="zh-CN/SVG/Tutorial/Texts">文字</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Transformations" title="zh-CN/SVG/Tutorial/Basic_Transformations">基本变换</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Clipping_and_masking" title="zh-CN/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG" title="zh-CN/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/Filter_effects" title="zh-CN/SVG/Tutorial/Filter effects">滤镜效果</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/SVG_fonts" title="zh-CN/SVG/Tutorial/SVG fonts">SVG字体</a></li>
<li><a href="/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag" title="zh-CN/SVG/Tutorial/SVG Image Tag">SVG的Image标签</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG" title="zh-CN/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li>
</ul>
<p>下面罗列的主题更高级，所以需要单独列出教程。</p>
<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5>
<p>待定（TBD：To be determined）</p>
<h5 id="SVG滤镜教程">SVG滤镜教程</h5>
<p>待定</p>
<h5 id="SVG的SMIL动画">SVG的SMIL动画</h5>
<p>待定</p>
<h5 id="在SVG中创建字体">在SVG中创建字体</h5>
<p>待定</p>
<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}</p>
|
