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>  

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