本节你会看到一个 SVG 文本,内容是本章前面见过的猫的图像。这个例子介绍了很多概念,在后续章节中会对这些概念进行详细介绍。这个文件很好地演示了如何编写示例文件,但你在创建项目中的 SVG 文件时,并不一定要按照这种方式编写。

示例 1-1 以标准的 XML 处理指令和 DOCTYPE 声明开始。根元素 <svg> 以像素为单位定义了整个图像的 widthheight,还通过 xmlns 属性定义了 SVG 的命名空间。<title> 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示,<desc> 元素允许我们为图像定义完整的描述信息。

示例 1-1:SVG 文档的基本结构 4

4当前稳定的 XML 和 SVG 版本都是 1.1。更多信息可参考:W3C-SVG1.1 规范(http://www.w3.org/TR/SVG11/)和 W3C-XML 规范(http://www.w3.org/TR/2006/REC-xml11-20060816)。——译者注

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!-- 在这里绘制图像 -->
</svg>

你可以添加一个 <circle> 元素来绘制猫的脸部。这个元素的属性指定中心点 x 坐标和 y 坐标以及半径。点 (0,0) 为图像的左上角。水平向右移动时 x 坐标增大,垂直向下移动时 y 坐标增大。

这个圆的位置和尺寸是绘图结构的一部分。绘图的颜色是表现(presentation)的一部分。按照 XML 程序的惯例,为了保持最大的灵活性,应该分离结构和表现。表现信息包含在 style 属性中。它的值是一系列表现属性和值,正如附录 B 中所述。这里轮廓的画笔颜色为黑色,填充颜色为 none 以使猫的脸部透明。SVG 见示例 1-2,其结果见图 1-8。

示例 1-2:基本形状——圆

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-02.html

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>

</svg>

{%}

图 1-8:阶段一,绘制圆

接下来我们在示例 1-3 中添加两个圆作为眼睛。虽然填充颜色和画笔颜色也是表现的一部分,但是 SVG 允许我们使用单独的属性指定它们。在这个示例中,填充(fill)和轮廓画笔颜色(stroke)写在两个单独的属性中,而不是全部写在 style 属性中。你可能并不会经常使用这种方法,在 5.2.4 节会详细讲述这些内容。这里提及它只是为了证明可以这么做。结果如图 1-9 所示。

为了节省空间,这里省略了 <?xml ...?><!DOCTYPE?>

示例 1-3:基本形状——填充圆

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-03.html

<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>

  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
</svg>

{%}

图 1-9:阶段二,绘制脸和眼睛

示例 1-4 使用两个 <line> 元素在猫的右脸上添加了胡须。我们想把这些胡须作为一个部件(稍后你会明白为什么),所以把它们包装在分组元素 <g> 里面,然后给它一个 id。我们可以通过指定起点和终点 x 坐标和 y 坐标(分别为 x1y1 以及 x2y2)的方式绘制一条直线。结果如图 1-10。

示例 1-4:基本形状——线

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-04.html

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="whiskers">
  <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
  <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
</svg>

{%}

图 1-10:阶段三,在右脸上添加胡须

现在我们使用 <use> 复用胡须分组并将它变换(transform)为左侧胡须。示例 1-5 中,首先在 scale 变换中对 x 坐标乘以 -1,翻转了坐标系统。这意味着原始坐标系统中的点 (75,95) 现在位于 (-75,95)。在新的坐标系统中,向左移动会使坐标增大。这就意味着必须将坐标系统向右 translate(平移)140 个像素(负值),才能将它们移到目标位置,如图 1-11 所示。

示例 1-5:变换坐标系统

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-05.html

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>

  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
</svg>

{%}

图 1-11:阶段四,添加左侧胡须

<use> 元素中的 xlink:href 属性在不同的命名空间中(详情请查看附录 A)。为了确保 SVG 文档能在所有 SVG 阅读器中工作,我们必须在开始的 <svg> 标签中添加 xmlns:xlink 属性。

transform 属性依次列出了所有的变换,不同的变换之间使用空格分隔。

示例 1-6 使用 <polyline> 元素构建了嘴和耳朵,它接受一对 xy 坐标作为 points 属性的值。你可以根据喜好使用空格或者逗号分隔这些数值。结果如图 1-12 所示。

示例 1-6:基本图形——折线

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-06.html

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>

  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
  <!-- 耳朵 -->
  <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
    style="stroke: black; fill: none;" />
  <!-- 嘴 -->
  <polyline points="35 110, 45 120, 95 120, 105, 110"
      style="stroke: black; fill: none;" />
</svg>

{%}

图 1-12:阶段五,添加耳朵和嘴

所有的基本形状实际上都是通用的 <path> 元素的快捷写法,示例 1-7 中使用 <path> 元素为猫添加了鼻子,结果如图 1-13 所示。这个元素被设计用来以尽可能简洁的方式指定路径或者一系列直线和曲线。示例 1-7 中的路径翻译过来就是“移动到坐标 (75,90)。绘制一条到坐标 (65,90) 的直线。然后以 x 半径为 5、y 半径为 10 绘制一个椭圆,最后回到坐标 (75,90) 处”。

示例 1-7:使用 <path> 元素

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-07.html

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>

  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
  <!-- 耳朵 -->
  <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
    style="stroke: black; fill: none;" />
  <!-- 嘴 -->
  <polyline points="35 110, 45 120, 95 120, 105, 110"
      style="stroke: black; fill: none;" />
  <!-- 鼻子 -->
  <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
    style="stroke: black; fill: #ffcccc"/>
</svg>

{%}

图 1-13:阶段六,添加鼻子

最后,由于这个图像绘制得很粗糙,所以用户很可能看不出这是一只猫。因此,示例 1-8 为这个图像添加了一些文本作为标记。在 <text> 元素中,xy 属性用于指定文本的位置,它们也是结构的一部分。字体和字号是表现的一部分,因而也是 style 属性的一部分。与你见过的其他元素不同,<text> 是一个容器元素,它的内容是你想要显示的文本。图 1-14 展示了最终结果。

示例 1-8:添加标记

http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-08.html

<svg width="140" height="170"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>

  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
  <!-- 耳朵 -->
  <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
    style="stroke: black; fill: none;" />
  <!-- 嘴 -->
  <polyline points="35 110, 45 120, 95 120, 105, 110"
      style="stroke: black; fill: none;" />
  <!-- 鼻子 -->
  <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
    style="stroke: black; fill: #ffcccc"/>
  <text x="60" y="165" style="font-family: sans-serif; font-size: 14pt;
    stroke: none; fill: black;">Cat</text>
</svg>

{%}

图 1-14:阶段七,带有文本标记的完整图像

有关 SVG 的简单介绍到此结束,接下来的几章将会深入探究这些概念。

 

30:00