SVG 入门教程(一) 基本形状

原文出处:https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html

基本 SVG 形状

<nobr>第 3 页（共5 页）</nobr>

SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：

• 圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
• 椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
• 矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。
• 线（line）：显示两个坐标之间的连线。
• 折线（polyline）：显示顶点在指定点的一组线。
• 多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。

下面的示例演示了这些形状：

xml 代码

<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Basic shapesdesc>

  <g>
    <circle cx="50" cy="50" r="25" />
    <ellipse cx="75" cy="125" rx="50" ry="25" />

    <rect x="155" y="5" width="75" height="100"/>
    <rect x="250" y="5" width="75" height="100" rx="30" ry="20" />

    <line x1="0" y1="150" x2="400" y2="150"
                         stroke-width="2" stroke="blue"/>

    <polyline points="50,175 150,175 150,125 250,200" />
    <polygon points="350,75 379,175 355,175 355,200 345,200
                                      345,175 321,175" />

    <rect x="0" y="0" width="400" height="200"
            fill="none" stroke="red" stroke-width="3" />
  g>
svg>

添加文本
<nobr>第 4 页（共5 页）</nobr>


除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像（*.gif 或 *.jpg 图像甚至 Flash 电影常常这么做）。
SVG 的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：
xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">

  <desc>Basic textdesc>

  <g>
    <rect x="0" y="0" width="400" height="125" fill="none"
            stroke="blue" stroke-width="3"/>

    <text x="10" y="50" font-size="30">Welcome to the world oftext>
    <text x="10" y="100" font-size="40"
       font-family="Monotype Corsiva"
       fill="yellow" stroke="red">Scalable Vector Graphics!text>
  g>
svg>
 

渲染顺序
<nobr>第 5 页（共5 页）</nobr>


当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用 z-index 属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。
如果指定一个元素没有填充色（使用 fill="none"），那么在它下面的各项会显现出来，就象您在这里看到的：
xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Overlapping shapesdesc>

  <g>
    <ellipse cx="125" cy="50" rx="50" ry="25"
                           fill="none" stroke="black" />
    <circle cx="125" cy="50" r="25" fill="dodgerblue" />
    <circle cx="125" cy="50" r="10" fill="black" />

    <ellipse cx="250" cy="50" rx="50" ry="25"
                           fill="none" stroke="black" />
    <circle cx="250" cy="50" r="25" fill="dodgerblue" />
    <circle cx="250" cy="50" r="10" fill="black" />

    <polygon points="65,50 185,50 185,75, 150,100
                                          100,100 65,75"
             fill="none" stroke="purple" stroke-width="4"/>
    <polygon points="190,50 310,50 310,75, 275,100
                                          225,100 190,75"
             fill="none" stroke="purple" stroke-width="4"/>

    <line x1="65" y1="50" x2="310" y2="50"
                          stroke="plum" stroke-width="2"/>

  g>
svg>

请注意每个元素会覆盖在它之前出现的元素。