From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/svg/tutorial/basic_shapes/index.html | 146 ++++++++++++++ .../svg/tutorial/basic_transformations/index.html | 80 ++++++++ .../svg/tutorial/clipping_and_masking/index.html | 142 ++++++++++++++ .../web/svg/tutorial/fills_and_strokes/index.html | 140 ++++++++++++++ .../web/svg/tutorial/filter_effects/index.html | 198 +++++++++++++++++++ .../web/svg/tutorial/getting_started/index.html | 96 +++++++++ files/zh-cn/web/svg/tutorial/gradients/index.html | 177 +++++++++++++++++ files/zh-cn/web/svg/tutorial/index.html | 58 ++++++ .../zh-cn/web/svg/tutorial/introduction/index.html | 43 +++++ .../svg/tutorial/other_content_in_svg/index.html | 52 +++++ files/zh-cn/web/svg/tutorial/paths/index.html | 214 +++++++++++++++++++++ files/zh-cn/web/svg/tutorial/patterns/index.html | 73 +++++++ files/zh-cn/web/svg/tutorial/positions/index.html | 48 +++++ files/zh-cn/web/svg/tutorial/svg_fonts/index.html | 94 +++++++++ .../web/svg/tutorial/svg_image_tag/index.html | 32 +++ .../tutorial/svg_in_html_introduction/index.html | 95 +++++++++ files/zh-cn/web/svg/tutorial/texts/index.html | 74 +++++++ .../web/svg/tutorial/tools_for_svg/index.html | 64 ++++++ 18 files changed, 1826 insertions(+) create mode 100644 files/zh-cn/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/zh-cn/web/svg/tutorial/basic_transformations/index.html create mode 100644 files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/zh-cn/web/svg/tutorial/filter_effects/index.html create mode 100644 files/zh-cn/web/svg/tutorial/getting_started/index.html create mode 100644 files/zh-cn/web/svg/tutorial/gradients/index.html create mode 100644 files/zh-cn/web/svg/tutorial/index.html create mode 100644 files/zh-cn/web/svg/tutorial/introduction/index.html create mode 100644 files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/zh-cn/web/svg/tutorial/paths/index.html create mode 100644 files/zh-cn/web/svg/tutorial/patterns/index.html create mode 100644 files/zh-cn/web/svg/tutorial/positions/index.html create mode 100644 files/zh-cn/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/zh-cn/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/zh-cn/web/svg/tutorial/texts/index.html create mode 100644 files/zh-cn/web/svg/tutorial/tools_for_svg/index.html (limited to 'files/zh-cn/web/svg/tutorial') diff --git a/files/zh-cn/web/svg/tutorial/basic_shapes/index.html b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..08beec5314 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,146 @@ +--- +title: 基本形状 +slug: Web/SVG/Tutorial/Basic_Shapes +tags: + - SVG + - 'SVG:教程' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

 {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

+ +

这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数SVG文档中，所以很有必要在这里介绍这部分元素。

+ +

基本形状

+ +

要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：

+ +

                                                                                                                               

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
+

注意：stroke、stroke-width 和fill 等属性在后面的章节中解释。

+
+ +

矩形

+ +

就像你能联想到的，rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角，则默认为0。

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
矩形左上角的x位置
+
y
+
矩形左上角的y位置
+
width
+
矩形的宽度
+
height
+
矩形的高度
+
rx
+
圆角的x方位的半径
+
ry
+
圆角的y方位的半径
+
+ +

圆形 

+ +

正如你猜到的，circle元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
圆的半径
+
cx
+
圆心的x位置
+
cy
+
圆心的y位置
+
+ +

椭圆

+ +

Ellipse 是circle元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
椭圆的x半径
+
ry
+
椭圆的y半径
+
cx
+
椭圆中心的x位置
+
cy
+
椭圆中心的y位置
+
+ +

线条

+ +

Line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
起点的x位置
+
y1
+
起点的y位置
+
x2
+
终点的x位置
+
y2
+
终点的y位置
+
+ +

折线

+ +

Polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
points
+
点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
+
+ +

多边形

+ +

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
points
+
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
+
+ +

路径

+ +

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂，所以会在下一章进行详细介绍。这里只介绍一个定义路径形状的属性。

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
一个点集数列以及其它关于如何绘制路径的信息。请阅读Paths 章节以了解更多信息。
+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

diff --git a/files/zh-cn/web/svg/tutorial/basic_transformations/index.html b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..843cf3f646 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,80 @@ +--- +title: 基础变形 +slug: Web/SVG/Tutorial/Basic_Transformations +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
+ +

现在我们准备好开始扭曲我们美丽的图像了。但是首先，让我们正式地介绍{{SVGElement("g")}}元素。利用这个助手，你可以把属性赋给一整个元素集合。实际上，这是它唯一的目的。一个示例：

+ +
<g fill="red">
+  <rect x="0" y="0" width="10" height="10" />
+  <rect x="20" y="0" width="10" height="10" />
+</g>
+
+ +

输出两个红色矩形。

+ +

所有接下来的变形都会用一个元素的transform属性总结。变形可以连缀，只要把它们连接起来就行，用空格隔开。

+ +

平移

+ +

你能把元素移动一段距离，甚至你可以根据相应的属性定位它。translate()变形方法专门效力于这个目的。

+ +
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+
+ +

该示例将呈现一个矩形，移到点(30,40)，而不是出现在点(0,0)。

+ +

如果没有指定第二个值，它默认被赋值0。

+ +

旋转

+ +

旋转一个元素是相当常见的任务。使用rotate()变形就可以了：

+ +
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
+
+ +

该示例显示了一个方形，旋转了45度。rotate()的值是用角度数指定的。

+ +

斜切

+ +

利用一个矩形制作一个斜菱形。可用skewX()变形和skewY()变形。每个需要一角度以确定元素斜切到多远。

+ +

缩放

+ +

scale()变形改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了，它默认等于第一个值。

+ +

用matrix()实现复杂变形

+ +

所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形，可以直接用matrix(a, b, c, d, e, f)变形设置结果矩阵，利用下面的矩阵，它把来自上一个坐标系统的坐标映射到新的坐标系统：

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

+ +

请看关于SVG变形文档的具体实例。关于该属性的详细信息可以在SVG推荐标准上找到。

+ +

坐标系统上的效果

+ +

如果使用了变形，你会在元素内部建立了一个新的坐标系统，应用了这些变形，你为该元素和它的子元素指定的单位可能不是1:1像素映射。但是依然会根据这个变形进行歪曲、斜切、转换、缩放操作。

+ +
<g transform="scale(2)">
+  <rect width="50" height="50" />
+</g>
+
+ +

上面示例中的结果矩形将是100x100px，如果你使用了比如说userSpaceOnUse等属性，将出现更吸引人的效果。

+ +

SVG嵌在SVG内部

+ +

比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐标系统。

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

以上示例基本上跟它上面的示例有同样的效果，也就是矩形将是指定的两倍大。

+ +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..c796d2a4d0 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,142 @@ +--- +title: 剪切和遮罩 +slug: Web/SVG/Tutorial/Clipping_and_masking +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}

+ +

擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形，你将很快发现下面的属性的作用了。

+ +

Clipping用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。

+ +

Masking允许使用透明度和灰度值遮罩计算得的软边缘。

+ +

创建剪切

+ +

我们在一个圆形的基础上创建上面提到的半圆形：

+ +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="cut-off-bottom">
+      <rect x="0" y="0" width="200" height="100" />
+    </clipPath>
+  </defs>
+
+  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+</svg>
+
+ +

在(100,100)创建一个圆形，半径是100。属性clip-path引用了一个带单个rect元素的{{ SVGElement("clipPath") }}元素。它内部的这个矩形将把画布的上半部分涂黑。注意，clipPath元素经常放在一个defs元素内。

+ +

然而，该rect不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：

+ + + +

{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}

+ +

现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，clipPath内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于clipPath内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。

+ +

遮罩

+ +

遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。

+ +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+
+ +

你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个mask属性指向一个mask元素。mask元素的内容是一个单一的rect元素，它填充了一个透明到白色的渐变。作为红色矩形继承mark内容的alpha值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：

+ + + +

{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}

+ +

用opacity定义透明度

+ +

有一个简单方法可以用来为整个元素设置透明度。它就是opacity属性：

+ +
<rect x="0" y="0" width="100" height="100" opacity=".5" />
+
+ +

上面的矩形将绘制为半透明。填充和描边还有两个属性是fill-opacity和stroke-opacity，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。

+ +
<svg  width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
+  <rect x="0" y="0" width="200" height="200" fill="blue" />
+  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+</svg>
+
+ + + +

{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}

+ +

你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为50%不透明度，导到双色描边的效果。

+ +

利用广为人知的CSS技术

+ +

Web开发工具箱中有一个很有用的工具是display:none。它虽然几无悬念，但是依然可以在SVG上使用该CSS属性，连同CSS2定义的visibility和clip属性。为了恢复以前设置的display:none，知道这一点很重要：所有的SVG元素的初始display值都是inline。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}

diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..65eeaebad8 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,140 @@ +--- +title: 填充和边框 +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - Beginner + - NeedsLiveSample + - SVG + - Tutorial +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}

+ +

可以使用几种方法来着色（包括指定对象的属性）使用内联CSS样式、内嵌CSS样式，或者使用外部CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。

+ +

Fill 和 Stroke 属性

+ +

上色

+ +

现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。

+ +
 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/>
+
+ +

此外，在SVG中你可以分别定义填充色和边框色的不透明度，属性fill-opacity控制填充色的不透明度，属性stroke-opacity控制描边的不透明度。

+ +
注意，FireFox 3+支持rgba值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了rgba值和填充/描边不透明度，它们将都被调用。
+ +

描边

+ +

除了颜色属性，还有其他一些属性用来控制绘制描边的方式。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
+  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
+  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
+</svg>
+ +

stroke-width属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。

+ +

第二个影响描边的属性是stroke-linecap属性，如上所示。它控制边框终点的形状。

+ +

stroke-linecap属性的值有三种可能值：

+ + + +

还有一个stroke-linejoin属性，用来控制两条描边线段之间，用什么方式连接。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
+
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
+</svg>
+ +

每条折线都是由两个线段连接起来的，连接处的样式由stroke-linejoin属性控制，它有三个可用的值，miter是默认值，表示用方形画笔在连接处形成尖角，round表示用圆角连接，实现平滑效果。最后还有一个值bevel，连接处会形成一个斜接。

+ +

最后，你可以通过指定stroke-dasharray属性，将虚线类型应用在描边上。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+ +

stroke-dasharray属性的参数，是一组用逗号分割的数字组成的数列。注意，和path不一样，这里的数字必须用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染5个填色单位，10个空白单位，5个填色单位，然后回头以这3个数字做一次循环，但是这次是创建5个空白单位，10个填色单位，5个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。

+ +

另外还有一些关于填充和边框的属性，包括fill-rule，用于定义如何给图形重叠的区域上色；stroke-miterlimit，定义什么情况下绘制或不绘制边框连接的miter效果；还有stroke-dashoffset，定义虚线开始的位置。

+ +

使用CSS

+ +

除了定义对象的属性外，你也可以通过CSS来样式化填充和描边。语法和在html里使用CSS一样，只不过你要把background-color、border改成fill和stroke。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如fill，stroke，stroke-dasharray等，但是不包括下面会提到的渐变和图案等功能。另外，width、height，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。

+ +
SVG规范将属性区分成properties和其他attributes，前者是可以用CSS设置的，后者不能。
+ +

CSS可以利用style属性插入到元素的行间：

+ +
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+
+ +

或者利用<style>设置一段样式段落。就像在html里这样的<style>一般放在<head>里，在svg里<style>则放在<defs>标签里。<defs>表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+ +

如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用hover这样的伪类来创建翻转之类的效果:

+ +
 #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+ +

你最好读一下CSS教程以便掌握它，一些可以在html里使用的css，在svg里可能无法正常工作，比如before和after伪类。所以这里需要一点经验。

+ +

你也可以定义一个外部的样式表，但是要符合normal XML-stylesheet syntax的CSS规则:

+ +
<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
+
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+ +

style.css看起来就像这样：

+ +
#MyRect {
+  fill: red;
+  stroke: black;
+}
+ +

{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}

diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.html b/files/zh-cn/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..0329562b11 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,198 @@ +--- +title: 滤镜效果 +slug: Web/SVG/Tutorial/Filter_effects +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

+ +

在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，就不能合理地与渐变类元素（<linearGradient>, <radialGradient>）一起被创建。滤镜（Filter）就是 SVG 中用于创建复杂效果的一种机制。

+ +

下面是一个为 SVG 内容添加模糊效果的基本示例。尽管基本的模糊效果可以使用渐变类元素创建，但是使用模糊滤镜可以做更多的事情。

+ +

示例

+ +

滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 <defs> 区块中。在 filter 标签中提供一系列图元（primitives），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。

+ +
<svg width="250" viewBox="0 0 200 85"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <!-- Filter declaration -->
+    <filter id="MyFilter" filterUnits="userSpaceOnUse"
+            x="0" y="0"
+            width="200" height="120">
+
+      <!-- offsetBlur -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+
+      <!-- litPaint -->
+      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+                          specularExponent="20" lighting-color="#bbbbbb"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+
+      <!-- merge offsetBlur + litPaint -->
+      <feMerge>
+        <feMergeNode in="offsetBlur"/>
+        <feMergeNode in="litPaint"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Graphic elements -->
+  <g filter="url(#MyFilter)">
+      <path fill="none" stroke="#D90000" stroke-width="10"
+            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
+      <path fill="#D90000"
+            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
+      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+        <text x="52" y="52">SVG</text>
+      </g>
+  </g>
+</svg>
+
+ + + +

{{ EmbedLiveSample('Example', '100%', 120) }}

+ +

步骤 1

+ +
<feGaussianBlur in="SourceAlpha"
+                stdDeviation="4"
+                result="blur"/>
+ +

设置 {{SVGElement('feGaussianBlur')}} 中的 in 属性为 "SourceAlpha" 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 result 保存在了一个名为 "blur" 的临时缓冲区中。

+ +

步骤 2

+ +
<feOffset in="blur"
+          dx="4" dy="4"
+          result="offsetBlur"/>
+ +

{{SVGElement('feOffset')}} 设置 in 的值为 "blur"，即我们前面保存 result 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 result 保存到名为 "offsetBlur" 的缓冲区中。步骤1、2其实是创建图形阴影的两个图元。

+ +

步骤 3

+ +
<feSpecularLighting in="offsetBlur"
+                    surfaceScale="5" specularConstant=".75"
+                    specularExponent="20" lighting-color="#bbbbbb"
+                    result="specOut">
+  <fePointLight x="-5000" y="-10000" z="20000"/>
+</feSpecularLighting>
+ +

{{SVGelement('feSpecularLighting')}} 设置输入源 in 为 "offsetBlur"，将会生成一个光照效果，并将结果 result 保存在 "specOut" 中。

+ +

步骤 4

+ +
<feComposite in="specOut" in2="SourceAlpha"
+             operator="in"
+             result="specOut"/>
+ +

第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（in2）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 result 为 "specOut"。

+ +

步骤 5

+ +
<feComposite in="SourceGraphic" in2="specOut"
+             operator="arithmetic"
+             k1="0" k2="1" k3="1" k4="0"
+             result="litPaint"/>
+ +

第二个 {{SVGElement('feComposite')}} 设置 in 为 "SourceGraphic" 和 "specOut"，即在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic"，然后保存结果为 "litPaint"。

+ +

步骤 6

+ +
<feMerge>
+  <feMergeNode in="offsetBlur"/>
+  <feMergeNode in="litPaint"/>
+</feMerge>
+ +

最后，{{SVGElement('feMerge')}} 元素合并了阴影效果 "offsetBlur" 和源图像的光照效果 "litPaint"。

+ +
+
Source graphic +

源图像

+
+ +
Primitive 1 +

图元 1

+
+ +
Primitive 2 +

图元 2

+
+ +
Primitive 3 +

图元 3

+
+ +
Primitive 4 +

图元 4

+
+ +
Primitive 5 +

图元 5

+
+ +
Primitive 6 +

图元 6

+
+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..343a468a5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,96 @@ +--- +title: 入门 +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - SVG教程 + - 起步 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

一个简单的示例

+ +

让我们直接从一个简单的例子开始，看一下下面代码：

+ +
<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>
+
+ +

复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。(Firefox用户点击这里)

+ +

svgdemo1.png

+ +

绘制流程包括以下几步：

+ +
    +
  1. 从svg根元素开始： + +
      +
    • 应舍弃来自 (X)HTML的doctype声明，因为基于SVG的DTD验证导致的问题比它能解决的问题更多。
      • +
    • SVG 2之前，version属性和baseProfile属性用来供其他类型的验证识别SVG的版本。SVG 2不推荐使用version和baseProfile这两个属性。
      • +
    • 作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns属性中绑定）。 请阅读命名空间速成 页面获取更多信息。
      • +
    +
    2. +
  2. 绘制一个完全覆盖图像区域的矩形 <rect/>，把背景颜色设为红色。
    3. +
  3. 一个半径80px的绿色圆圈<circle/>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）。
    4. +
  4. 绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。
    5. +
+ +

SVG文件的基本属性

+ + + +

SVG 文件类型

+ +

SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”（全部小写）作为此类文件的扩展名。

+ +

由于在某些应用（比如地图应用等）中使用时，SVG文件可能会很大，SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的IIS服务器，使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的，而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG。

+ +

关于web服务器的小提示

+ +

如果你已经知道了如何创建基本SVG文件，下一步就是把它们上传到web服务器，但是在这阶段有一些陷阱。对于普通SVG文件，服务器应该会发送下面的HTTP头：

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

对于gzip压缩的SVG文件，服务器应该会发送下面的HTTP头：

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

可以利用Network Monitor panel或者web-sniffer.net之类的网站来检查服务器是否给SVG文件发送正确的HTTP头，向web-sniffer.net提交你的一个SVG文件的链接，然后查看HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。如果不能说服他们为SVG修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读SVG维基的server configuration page以找到一些简单的解决方案。

+ +

服务器配置错误是SVG加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给SVG文件发送正确的响应头，这时Firefox很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.html b/files/zh-cn/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..b67d799905 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/gradients/index.html @@ -0,0 +1,177 @@ +--- +title: 渐变 +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +

{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

+ +

并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。

+ +

有两种类型的渐变：线性渐变和径向渐变。你必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。

+ +

线性渐变

+ +

线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个{{SVGElement('linearGradient')}} 节点。

+ +

基础示例

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]></style>
+  </defs>
+
+  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+
+</svg>
+ +

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

+ +

以上是一个应用了线性渐变的<rect>元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过CSS来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从0%开始（或者0也可以，百分号可以扔掉），到100%（或1）结束。如果stop设置的位置有重合，将使用XML树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性stop-opacity来设置某个位置的半透明度（同样，对于FF3你也可以设置rgba值）。

+ +
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
+ +

使用渐变时，我们需要在一个对象的属性fill或属性stroke中引用它，这跟你在CSS中使用url引用元素的方法一样。在本例中，url只是一个渐变的引用，我们已经给这个渐变一个ID——“Gradient”。要想附加它，将属性fill设置为url(#Gradient)即可。现在对象就变成多色的了，也可以用同样的方式处理stroke。

+ +

<linearGradient>元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的Gradient2创建了一个垂直渐变。

+ +
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
+ +
注意: 你也可以在渐变上使用xlink:href属性。如果使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要再Grandient2中重新创建全部的颜色中值（stop）。 + +
 <linearGradient id="Gradient1">
+   <stop id="stop1" offset="0%"/>
+   <stop id="stop2" offset="50%"/>
+   <stop id="stop3" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+
+尽管通常你可能在文档的顶部就定义了Gradient1，但我在结点上直接包含了xlink的命名空间，关于这点的更多信息我们会在讨论图片的时候详解。
+ +

径向渐变

+ +

径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的defs中添加一个{{SVGElement('radialGradient')}}元素

+ +

示例

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="RadialGradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
+
+</svg>
+ +

{{ EmbedLiveSample('Radial_Gradient','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

+ +

中值（stops）的使用方法与之前一致，但是现在这个对象的颜色是中间是红色的，且向着边缘的方向渐渐的变成蓝色。跟线性渐变一样，<radialGradient> 节点可以有多个属性来描述其位置和方向，但是它更加复杂。径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由cx和cy属性及半径r来定义，通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个<rect>所展示的。

+ +

第二个点被称为焦点，由fx和fy属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，如下例。

+ +

中心和焦点

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+
+</svg>
+ +

{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

+ +

因为如果焦点如之前描述的那样被移到圆圈的外面，渐变将不能正确呈现，所以该点会被假定在圆圈范围内。如果没有给出焦点，将认为该点与中心点的位置一致。

+ +

线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，这里我希望额外提及一个spreadMethod属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。这个属性可以有三个值：pad、reflect或repeat。Pad就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。reflect会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以100%偏移位置的颜色开始，逐渐偏移到0%位置的颜色，然后再回到100%偏移位置的颜色。repeat也会让渐变继续，但是它不会像reflect那样反向渐变，而是跳回到最初的颜色然后继续渐变。

+ +

spreadMethod

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+
+</svg>
+ +

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

+ +

两种渐变都有一个叫做 gradientUnits（渐变单元）的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：userSpaceOnUse 、objectBoundingBox。默认值为objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从0到1的坐标值，渐变就会自动的缩放到对象相同大小。userSpaceOnUse使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。上例中的radialGradient需要被重写成：

+ +
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
+
+ +

你也可以利用属性gradientTransform给渐变添加额外的变化，但是因为我们还没有介绍transforms，所以我们将在后续的章节中介绍它。

+ +

如果对象边界框不是一个正方形，处理gradientUnits="objectBoundingBox"还有一些其他警告，但是这些方法特别复杂因此有待一些了解得更深的人来解释他们。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

diff --git a/files/zh-cn/web/svg/tutorial/index.html b/files/zh-cn/web/svg/tutorial/index.html new file mode 100644 index 0000000000..3dc8d31499 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/index.html @@ -0,0 +1,58 @@ +--- +title: SVG教程 +slug: Web/SVG/Tutorial +tags: + - SVG + - SVG教程 + - 中间体 + - 需要内容 + - 需要帮助 + - 需要更新 +translation_of: Web/SVG/Tutorial +--- +

可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。

+ +

本教程旨在解释SVG内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在Inkscape的文档页面上获取更多有用的资源。另外还有一个比较好的SVG介绍：W3C的SVG入门。

+ +
本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！
+ +
从头开始介绍SVG
+ + + +

下面罗列的主题更高级，所以需要单独列出教程。

+ +
JavaScript脚本化SVG
+ +

待定（TBD：To be determined）

+ +
SVG滤镜教程
+ +

待定

+ +
SVG的SMIL动画
+ +

待定

+ +
在SVG中创建字体
+ +

待定

+ +

{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}

diff --git a/files/zh-cn/web/svg/tutorial/introduction/index.html b/files/zh-cn/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..44f8a61317 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/introduction/index.html @@ -0,0 +1,43 @@ +--- +title: 引言 +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

+ +

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

+ +

SVG诞生于1999年，之前有几个相互竞争的格式规范被提交到W3C，但是都没有获得批准。主流浏览器均支持SVG。加载慢是SVG的一个缺点。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方扩展(extensions，原文有误，应该是插件plugins，类似flash)。当然，是否使用SVG还要取决于你要实现什么。

+ +

基本要素

+ +

HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由{{ SVGElement('svg') }}根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

+ +

从这些开始，SVG可以变得更加复杂。SVG支持渐变、旋转、动画、滤镜效果、与JavaScript交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

+ +

开始之前

+ +

包括Inkscape在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器，因为想要理解SVG内部的原理，最好的方法就是动手写一些SVG的标记。你需要注意到你的最终目标。各种SVG浏览器是有差异的，因此很可能你制作了一个SVG图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同，另外，如果你将其他技术和SVG一起使用（比如JavaScript和CSS），也会出现类似的情况。

+ +

所有的现代浏览器都支持SVG，在某些情况下甚至几个版本都支持SVG。Can I use上有一份比较详细的支持SVG的浏览器列表，Firefox 1.5以后的版本支持SVG的部分内容，并且支持的程度越来越高。希望通过这份教程，MDC能帮助开发者理解Gecko内核和其他一些主要编译器之间的差异。

+ +

正式开始之前，你需要基本掌握XML和其它标记语言比如说HTML，如果你不是很熟悉XML，这里有几个重点一定要记住：

+ + + +

SVG是一个庞大的规范，本教程主要涵盖基础内容。掌握了这些内容之后，你就有能力使用元素参考和接口参考，学习其他你需要知道的内容。

+ +

SVG的种类

+ +

自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG版本是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本在2011年成为推荐标准，完整的SVG1.2本来是下一个标准版本，但它又被SVG2.0取代。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。

+ +

除了完整的SVG推荐标准，W3C工作组还在2003年推出了SVG Tiny和SVG Basic。这两个配置文件主要瞄准移动设备。首先SVG Tiny主要是为性能低的小设备生成图元，而SVG Basic实现了完整版SVG里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008年，SVG Tiny1.2成为W3C推荐标准。

+ +

另外还有一些关于SVG打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。

+ +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

+ +

{{ languages( { "de": "de/SVG/Tutorial/Einführung", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction", "zh-CN": "zh-CN/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..82bb1edf5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,52 @@ +--- +title: 其它SVG内容 +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +

{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

+ +

除了图形化原件，如矩形和圆形之外，SVG还提供了一些元素用来在图片中嵌入别的类型的内容。

+ +

嵌入光栅图像

+ +

很像在HTML中的img元素，SVG有一个image元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件。

+ +

嵌入的图像变成一个普通的SVG元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它SVG工具：

+ +
<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
+</svg>
+ + + +

{{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}

+ +

嵌入任意XML

+ +

因为SVG是一个XML应用，所以你总是可以在SVG文档的任何位置嵌入任意XML。但是你没有必要定义周围的SVG需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在SVG中添加了{{ SVGElement("foreignObject") }} 元素。它的唯一的目的是作为其它标记的容器和SVG样式属性的载体（更突出的width和height用来定义该对象占用的空间。）。

+ +

foreignObject元素是一个好办法，用来在SVG中嵌入XHTML。如果你有更长的文本，该HTML布局比SVG text元素更适合。另一个经常被引用的用例是用MathML写的方程式。对于SVG的科学应用，它是连接两个世界的一个很好的办法。

+ +
注意：请记住，foreignObject元素的内容是能被浏览器加工的。一个独立的SVG浏览器不太可能呈现HTML或MathML。
+ +

因为foreignObject是一个SVG元素，所以你可以像用图像那样，使用任何SVG的精华，它将被应用到它的内容。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

diff --git a/files/zh-cn/web/svg/tutorial/paths/index.html b/files/zh-cn/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..94cbf89821 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/paths/index.html @@ -0,0 +1,214 @@ +--- +title: 路径 +slug: Web/SVG/Tutorial/Paths +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+ +

如上一章所说，<path>元素是SVG基本形状中最强大的一个。  你可以用它创建线条, 曲线, 弧形等等。

+ +

另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polyline元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解很重要。虽然不建议使用XML编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复SVG中的显示问题。

+ +

上一章提到过，path元素的形状是通过属性{{ SVGAttr("d") }}定义的，属性d的值是一个“命令+参数”的序列，我们将讲解这些可用的命令，并且展示一些示例。

+ +

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（例如：从上一个点开始，向上移动10px，向左移动7px）。

+ +

因为属性d采用的是用户坐标系统，所以不需标明单位。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。

+ +

直线命令

+ +

<path>元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。

+ +
M x y
+
+ +

或

+ +
m dx dy
+ +

这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到(10,10)坐标上有一个点。注意，如果只画path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用path绘制路径的同时，也会用circle标注路径上的点。）

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>
+ +

能够真正画出线的命令有三个（M命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，L，L需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

+ +
 L x y (or l dx dy)
+
+ +

另外还有两个简写命令，用来绘制水平线和垂直线。H，绘制水平线。V，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

+ +
 H x (or h dx)
+ V y (or v dy)
+
+ +

现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用<rect/>元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>
+ +

最后，我们可以通过一个“闭合路径命令”Z来简化上面的path，Z命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。

+ +
 Z (or z)
+
+ +

所以上面例子里用到的路径，可以简化成这样：

+ +
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

你也可以使用这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个80*80的正方形，用相对命令可以这样描述：

+ +
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

上述路径是：画笔移动到(10,10)点，由此开始，向右移动80像素构成一条水平线，然后向下移动80像素，然后向左移动80像素，然后再回到起点。

+ +

你可能会问这些命令有什么用，因为 <polygon> 和 <polyline> 可以做到画出一样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好用，但是，path却是众多开发者在SVG绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成path可能有所不同，因为另外两种方法只需要指明点，而path在这方面的语法会更复杂一些。

+ +

曲线命令

+ +

绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在Inkscape、Illustrator或者Photoshop中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份Wikipedia的文档。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。

+ +

贝塞尔曲线

+ +

我们从稍微复杂一点的三次贝塞尔曲线C入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：

+ +
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+
+ +

这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。）

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+
+ +

上面的例子里，创建了9个三次贝塞尔曲线。有一点比较遗憾，标记控制点的代码会比较庞大，所以在这里舍弃了。（之前所有点都用circle标记，此处一样，只不过没把代码列出来）。如果你想更准确地控制它们，可以自己动手把他们画出来。图例上的曲线从左往右看，控制点在水平方向上逐渐分开，图例上的曲线从上往下看，控制点和曲线坐标之间离得越来越远。这里要注意观察，曲线沿着起点到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到终点的方向结束。

+ +

你可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，你可以使用一个简写的贝塞尔曲线命令S，如下所示：

+ +
 S x2 y2, x y (or s dx2 dy2, dx dy)
+
+ +

S命令可以用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。下面是S命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

另一种可用的贝塞尔曲线是二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

+ +
 Q x1 y1, x y (or q dx1 dy1, dx dy)
+
+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线。

+ +
 T x y (or t dx dy)
+
+ +

和之前一样，快捷命令T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

虽然三次贝塞尔曲线拥有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。

+ +

弧形

+ +

弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A命令需要用到比较多的参数：

+ +
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

弧形命令A的前两个参数分别是x轴半径和y轴半径，它们的作用很明显，不用多做解释，如果你不是很清楚它们的作用，可以参考一下椭圆ellipse命令中的相同参数。弧形命令A的第三个参数表示弧形的旋转情况，下面的例子可以很好地解释它：

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+ +

如图例所示，画布上有一条对角线，中间有两个椭圆弧被对角线切开(x radius = 30, y radius = 50)。第一个椭圆弧的x-axis-rotation（x轴旋转角度）是0，所以弧形所在的椭圆是正置的（没有倾斜）。在第二个椭圆弧中，x-axis-rotation设置为-45，所以这是一个旋转了45度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图示中的第二个椭圆形。

+ +

对于上图没有旋转的椭圆，只有2种弧形可以选择，不是4种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。

+ +

+ +

上面提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆用来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这里要讲的参数是large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个饼图。

+ +

如果你是从Canvas过渡到SVG，那么弧形会比较难以掌握，但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的，因为圆上的任意点都可以是起点同时也是终点，无数种方案可以选择，真正的路径无法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使用真正的circle或者ellipse元素会更容易一些。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/zh-cn/web/svg/tutorial/patterns/index.html b/files/zh-cn/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..bd58a30004 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/patterns/index.html @@ -0,0 +1,73 @@ +--- +title: Patterns +slug: Web/SVG/Tutorial/Patterns +tags: + - SVG +translation_of: Web/SVG/Tutorial/Patterns +--- +

{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}

+ +

图案

+ +

在我看来patterns（图案）是SVG中用到的最让人混淆的填充类型之一。它的功能非常强大，所以我认为他们值得讨论一下并且我们应至少对他们有最基本的了解。跟渐变一样，{{SVGElement('pattern')}}需要放在SVG文档的<defs>内部。

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <linearGradient id="Gradient1">
+      <stop offset="5%" stop-color="white"/>
+      <stop offset="95%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="5%" stop-color="red"/>
+      <stop offset="95%" stop-color="orange"/>
+    </linearGradient>
+
+    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+    </pattern>
+
+  </defs>
+
+  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
+</svg>
+ +

{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}

+ +

在pattern元素内部你可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用之前学习过的任何样式样式化，包括渐变和半透明。这里我们在pattern中绘制两个矩形（两个矩形互相重叠，一个矩形是另一个矩形大小的二倍，且用于填充整个pattern）和一个圆。

+ +

关于pattern容易混淆的事是，pattern定义了一个单元系统以及他们的大小。上例中，我们在pattern元素上定义了width和height属性，用于描述在重复下一个图案之前应该跨过多远。如果你想要在绘制时偏移矩形的开始点，也可以使用x和y属性，原因如下。

+ +

就像前面使用了gradientUnits属性，同样的pattern也有一个属性patternUnits用于描述我们使用的属性单元。这同之前使用的objectBoundingBox默认值一样，所以当一个值为 1 时，它被缩放到应用 pattern 对象的宽高值。因此，我们希望 pattern 垂直和水平的重复4次，所以宽高被设置位0.25，这一位置 pattern 的宽高仅为总外框大小的 0.25。

+ +

与渐变不同，pattern有第二个属性patternContentUnits，它描述了pattern元素基于基本形状使用的单元系统，这个属性默认值为userSpaceOnUse，与patternUnits属性相反，这意味着除非你至少指定其中一个属性值（patternContentUnits或patternUnits），否则在pattern中绘制的形状将与pattern元素使用的坐标系不同，当你手写这部分时会容易混淆。为了使上例生效，我们必须考虑我们的边框（200像素）大小和我们实际希望pattern垂直和水平重复 4 次的需求。这意味着每个 pattern 单元应该是 50x50 的方形，pattern 中的两个矩形和圆形的大小会被缩放适应到一个 50x50 的边框里，任何我们绘制在边框外的内容都不会显示。因为我们希望 pattern 从边框的左上角里开始，所以 pattern 也必须偏移 10 像素，也就是 pattern 的 x 和 y 属性需要调整为 10/200=0.05。

+ +

如果对象改变了大小，pattern会自适应其大小，但是对象里面的内容不会自适应。所以当我们在 pattern 中还是放置 4 个重复的 pattern 时，组成 pattern 的对象将不会保持相同的大小，同时在他们之间会有大片空白区域。通过改变patternContentUnits属性，我们可以把所有的元素放到相同的单元系统中：

+ +
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
+   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
+   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
+   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

现在，因为pattern内容与pattern本身处于相同的单元系统中，所以我们不用偏移边框以使pattern在正确的位置上开始，并且即使对象变大，pattern也会自动的缩放以保证pattern内部的对象数目和重复不变。这与 userSpaceOnUse 系统不同，userSpaceOnUse 系统中如果对象改变大小，pattern本身会保持不变，只是重复更多次去填满边框。

+ +

它有一点点的副作用，在Gecko中的圆如果半径设置得小于0.075（尽管半径应该设置的比这个值大得多。这个可能是pattern元素中的一个bug，或者也不算bug，我也不太清楚）的话绘制的时候可能会出现问题，为了规避这个问题，可能最好的办法是尽量避免在objectBoundingBox单元中绘制图形。

+ +

在你想要使用pattern的时候，可能你并不中意这些方法中的任何一个，Pattern通常都是有确认的大小并且重复他们自己，与对象形状独立开来。要想创建这种pattern，pattern和它的内容必须在当前用户空间中绘制，这样当对象在做如下操作时他们才不会改变形状：

+ +
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

当然，这意味着如果你后续改变了对象大小，pattern也不会缩放。上述三个举例在下图中放在一个矩形中展示，高度被轻微拉伸到300px，但是我注意到这不是完整的图片，并且有些其他选项可能你的应用不支持。

+ +

Image:SVG_Pattern_Comparison_of_Units.png

+ +

{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}

diff --git a/files/zh-cn/web/svg/tutorial/positions/index.html b/files/zh-cn/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..294fe65838 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/positions/index.html @@ -0,0 +1,48 @@ +--- +title: 坐标定位 +slug: Web/SVG/Tutorial/Positions +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

网格

+ +

对于所有元素，SVG使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

+ +

示例：

+ +

元素

+ +
<rect x="0" y="0" width="100" height="100" />
+
+
+ +

定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。

+ +

什么是 "像素"?

+ +

基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。但是这种情况是可以改变的，否则 SVG 的名字里也不至于会有“Scalable”（可缩放）这个词。如同CSS可以定义字体的绝对大小和相对大小，SVG也可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。

+ +

在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从svg根元素开始：

+ +
<svg width="100" height="100">
+
+
+ +

上面的元素定义了一个100*100px的SVG画布，这里1用户单位等同于1屏幕单位。

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+
+ +

这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。

+ +

用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是多大）。在定义了具体尺寸单位的SVG中，比如单位是“cm”或“in”，最终图形会以实际大小的1比1比例呈现。

+ +

下面是引自SVG1.1规范的一段说明：

+ +
+

[…] 假设在用户的设备环境里，1px等于0.2822222毫米（即分辨率是90dpi），那么所有的SVG内容都会按照这种比例处理： […] "1cm" 等于 "35.43307px" （即35.43307用户单位）；

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.html b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..0ff198dcff --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,94 @@ +--- +title: SVG 字体 +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

当规定SVG时，在浏览器支持web字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说PostScript或OTF兼容，而是为了将字形信息嵌入SVG呈现的一个简单的方法。

+ +
SVG字体当前只在Safari和Android浏览器中受支持。
+Internet Explorer还没有考虑实现它，Chrome 38（和Opera25）移除了这个功能，Firefox已经无限期推迟实施它以专心实现WOFF。别的工具比如说Adobe SVG Viewer插件、Batik和部分Inkscape支持SVG字体嵌入。
+ +

定义一个SVG字体的基础是{{ SVGElement("font") }}元素。

+ +

定义一个字体

+ +

在SVG中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自规范文档的示例），并详细解释。

+ +
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+  <!-- more glyphs -->
+</font>
+
+ +

我们从{{ SVGElement("font") }}元素开始。这个携带了一个ID属性，使它能够通过一个URI被引用（如下所示）。属性horiz-adv-x定义了相比之单一字形的路径定义，一个字符的平均宽度。值1000设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。

+ +

{{ SVGElement("font-face") }}元素在SVG中等同于CSS的 @font-face 声明。它定义了最终字体的基本属性，比如说weight、style，等等。在上面这个示例中，最重要的是定义font-family，后面的CSS和SVG font-family属性可以引用它的值。属性font-weight和font-style跟CSS中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以提升多少。

+ +

它的子元素，{{ SVGElement("font-face-src") }}元素，相对于CSS的@font-face描述符中的src描述符。你可以利用它的子元素 {{ SVGElement("font-face-name") }}和{{ SVGElement("font-face-uri") }}把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。

+ +

紧跟着{{ SVGElement("font-face-src") }}元素的是一个{{ SVGElement("missing-glyph") }}元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化SVG内容。你可以在这里使用任何其它的SVG元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性d——它精确定义了字形的形状，就像标准SVG路径所做的那样。

+ +

真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是unicode。它定义了表达这个字形的unicode代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的xml:lang属性表达）。而且，你可以使用任意的SVG来定义这个字形，它允许用户代理所支持的很多效果。

+ +

有两个进一步的元素，可以定义在font元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性u1和属性u2）以及一个属性k。属性k决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。

+ +
<hkern u1="A" u2="V" k="20" />
+
+ +

引用一个字体

+ +

如果你已经把你的字体声明如上放在一起，你可以使用一个单一的font-family属性以实现在SVG文本上应用字体：

+ +
<font>
+  <font-face font-family="Super Sans" />
+  <!-- and so on -->
+</font>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+
+ +

然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。

+ +

选项：使用CSS @font-face

+ +

你可以使用@font-face以引用远程（或者非远程）字体：

+ +
<font id="Super_Sans">
+  <!-- and so on -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

选项：引用一个远程字体

+ +

上面提到的font-face-uri元素允许你引用一个外来字体，因此可以有很大的可重用性：

+ +
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git a/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..4b01b91f24 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,32 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

+ +

SVG的{{ SVGElement("image") }}元素允许在一个SVG对象内部呈现光栅图像。

+ +

在这个基本示例中，一个{{ SVGAttr("xlink:href") }} 属性引用了一个将呈现在SVG对象中的.jpg图像：

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +

这里有一些重要的事情需要注意（引用自W3规范文档）：

+ + + +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..a29b85a1da --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,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 +--- +

概述

+ +

本文及其相关示例展示了如何使用内联的 SVG 给一个表单提供背景图片，它展示了如何按照编写常规XHTML代码相同的方式来通过JavaScript 和 CSS 操作图片。注意，该示例仅在支持XHTML（非HTML）并集成了SVG的浏览器中正常工作。

+ +

源码

+ +

源码如下： 查看示例

+ +
<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>
+
+ +

讨论

+ +

该页面主要是常规的XHTML、CSS和Javascript，唯一有趣的部分就是包含了<svg>元素。该元素及其子元素都被声明在SVG的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由CSS设置，当用户在表单中输入了错误信息，脚本会给<body>设置一个invalid属性，样式规则将渐变颜色的end-stop颜色设置为红色（另一个样式规则用于展示错误提示信息）

+ +

该方法有如下几点需要注意：

+ + + +
+

如果需要给一个内嵌的SVG元素通过DOM方法添加一个有外链的图片，我们需要使用 setAttributeNS 来设置外链地址 href. 示例如下:

+ +
var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+ +

细节

+ +

viewBox属性创建了一个与SVG图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个100x100的视觉系中。

+ +

preserveAspectRatio属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。

+ +

样式属性指定了SVG在form背景中的位置。

+ + + + diff --git a/files/zh-cn/web/svg/tutorial/texts/index.html b/files/zh-cn/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..6380942179 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+ +

在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。

+ +

基础

+ +

我们已经在之前入门示例中看到了，在一个SVG文档中，<text>元素内部可以放任何的文字。

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

属性x和属性y性决定了文本在视口中显示的位置。属性text-anchor，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。

+ +

和形状元素类似，属性fill可以给文本填充颜色，属性stroke可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。

+ +

设置字体属性

+ +

文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

+ +

其它文本相关的元素

+ +

tspan

+ +

该元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。

+ +
<text>
+  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
+</text>
+
+ +

tspan元素有以下的自定义属性：

+ +

x
+ 为容器设置一个新绝对x坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。

+ +

dx
+ 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。

+ +

此外还有属性y和属性dy作垂直转换。

+ +

rotate
+ 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。

+ +

textLength
+ 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。

+ +

tref

+ +

tref元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

该元素利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：

+ +
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
+<text>
+  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
+    This text follows a curve.
+  </textPath>
+</text>
+ +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
diff --git a/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..9127b6fad3 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,64 @@ +--- +title: SVG工具 +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

现在我们已经讲解了SVG内部的基础。我们将看一看哪些工具可以制作或呈现SVG文件。

+ +

浏览器支持

+ +

随着IE9面世，最终所有的主流浏览器将支持SVG：Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome和Opera。基于Webkit的移动设备浏览器（主要是指iOS和Android），都支持SVG。在较老或者较小的设备上，一般支持SVG Tiny。

+ +

Inkscape

+ +

URL: www.inkscape.org

+ +

图形格式最重要的工具之一，是一个相当好的绘图程序。Inkscape提供了最先进的矢量绘图功能，而且它是开源的。

+ +

此外它使用SVG作为它的原生文件格式。为了存储Inkcape特有的数据，它扩展了SVG文件，添加了自定义命名空间的元素和属性，但是你依然可以选择导出纯SVG文件。

+ +

Adobe Illustrator

+ +

URL: www.adobe.com/products/illustrator/

+ +

在Adobe收购Macromedia之前，它已经是最著名的SVG的推动者。长期以来，Illustrator对SVG支持得很好。然而，它输出的SVG经常显出一些怪癖，导致有必要为普适性而进行后续处理。

+ +

Apache Batik

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik是Apache软件基金会支持下的一个开源工具集。这个工具包是用Java写的，提供了相当完整的SVG 1.1支持，而且还有很多源自于SVG 1.2计划的功能。

+ +

除了查看器（Squiggle）以及输出为PNG的光栅化输出，Batik还提供了一个SVG完美打印机以格式化SVG文件，以及一个TrueType字体到SVG字体的转换器。

+ +

与Apache FOP联用，Batki还可以把SVG转换成PDF。

+ +

其它呈现器

+ +

要想从一个SVG源创建一个光栅图像，存在很多个项目。ImageMagick是最著名的命名行图象处理工具之一。Wikipedia所用到的Gnome库rsvg能把它们的SVG图形光栅化。

+ +

Raphael JS

+ +

URL: raphaeljs.com

+ +

这是一个JavaScript库，表现为浏览器编译器之间的一个抽像层。特别老的Internet Explorer版本可以用生成的VML支持。VML，一种矢量标记语言，它是SVG的两个祖先之一，从IE 5.5以来就存在了。

+ +

Google Docs

+ +

URL: www.google.com/google-d-s/drawings/

+ +

从Google Docs绘制，可以被输出为SVG。

+ +

Science

+ +

这两个名声很响的策划工具xfig和gnuplot都支持导出为SVG。为了在web上呈现图像， JSXGraph支持VML、SVG和canvas，基于浏览器的功能，自动决定使用哪种技术。

+ +

在GIS（地理图形信息系统）应用中，SVG是常用的存储和呈现格式。请阅读carto.net以了解详情。

+ +

更多工具

+ +

W3C提供了一个支持SVG的程序列表。

+ +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

-- cgit v1.2.3-54-g00ecf