文章内容均来源于 http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure
我们随便提到，SVG可以让你从它的演示文档的结构分开。在本章中，我们将比较和对比，讨论的表象方面的更详细的文件，然后显示一些SVG元素，你可以用它来使文档的结构更清晰，更具可读性，更容易维护。
结构和表现
正如我们在第1章，第1.4.2节中，XML的目标之一是提供一种方式来结构化数据和分离这种结构从它的视觉呈现。考虑从该章节的猫图，你认识到它作为一只猫，因为它的结构-的几何形状，使绘图的位置和大小。如果我们要做出结构性的变化，如缩短胡须，圆鼻子，长耳朵和舍入他们的目的，绘图将成为一个兔子，不管什么表面演示文稿可能。的结构，因此，告诉你是什么图形。
使用样式SVG
SVG可以让你指定图形表象方面在四个方面;内嵌样式，内部样式表，外部样式表和演示属性。让我们看看这些
内嵌样式
<circle cx="20" cy="20" r="10"
style="stroke: black; stroke-width: 1.5; fill: blue; fill-opacity: 0.6"/>
内部样式表
你可以申请一个特定的元素出现的所有，或使用类适用于单个元素命名实例。4-2双蓝色粗虚线与浅黄色内饰，将吸引各界设立内部样式表。我们把样式表内<defs>的元素，我们将在本章的后面讨论。
然后，该示例吸引了几个圈子。图4-2的第二行中的圆圈内联样式 ，覆盖内部样式表中的规格。
<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<style type="text/css"><![CDATA[
circle {
fill: #ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]></style>
</defs>
<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>
<circle cx="60" cy="60" r="15" style="stroke-width: 1;
stroke-dasharray: none;"/>
</svg>
外部样式表
如果你想申请多个SVG文档的一组样式，您可以复制并粘贴到他们每个人的内部样式表。这当然是不切实际的大量文件，如果你需要的所有文件进行全局更改。相反，你应该采取一切的开始和结束的<style>标签（不包括<！[CDATA [和]]> ），并将其保存在外部文件中，这成为一个外部的样式表之间的信息。例4-3显示了一个外部的样式表已保存在一个名为ext_style.css这个样式采用了多种选择，包括*，设置一个默认的，没有任何其他样式的所有元素，并一起与SVG，产生图4-3。
* { fill:none; stroke: black; } /* default for all elements */
rect { stroke-dasharray: 7 3; }
circle.yellow { fill: yellow; }
.thick { stroke-width: 5; }
.semiblue { fill:blue; fill-opacity: 0.5; }
<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200"
preserveAspectRatio="xMinYMin meet">
<line x1="10" y1="10" x2="40" y2="10"/>
<rect x="10" y="20" width="40" height="30"/>
<circle class="yellow" cx="70" cy="20" r="10"/>
<polygon class="thick" points="60 50, 60 80, 90 80"/>
<polygon class="thick semiblue"
points="100 30, 150 30, 150 50, 130 50"/>
</svg>polygon画封口的形状(多边形) polyline画没封口的线(折线) line画两点之间的直线 path路径
在这里提一下路径 来源于http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html
这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。
绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。
绝对坐标绘制指令
指令
参数
说明
M
x y
将画笔移动到点(x,y)
L
x y
画笔从当前的点绘制线段到点(x,y)
H
x
画笔从当前的点绘制水平线段到点(x,y0)
V
y
画笔从当前的点绘制竖直线段到点(x0,y)
A
rx ry x-axis-rotation large-arc-flag sweep-flag x y
画笔从当前的点绘制一段圆弧到点(x,y)
C
x1 y1, x2 y2, x y
画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S
x2 y2, x y
特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q
x1 y1, x y
绘制二次贝塞尔曲线到点(x,y)
T
x y
特殊版本的二次贝塞尔曲线(省略控制点)
Z
无参数
绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。
| 指令 | 参数 | 说明 |
| M | x y | 将画笔移动到点(x,y) |
| L | x y | 画笔从当前的点绘制线段到点(x,y) |
| H | x | 画笔从当前的点绘制水平线段到点(x,y0) |
| V | y | 画笔从当前的点绘制竖直线段到点(x0,y) |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 画笔从当前的点绘制一段圆弧到点(x,y) |
| C | x1 y1, x2 y2, x y | 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y) |
| S | x2 y2, x y | 特殊版本的三次贝塞尔曲线(省略第一个控制点) |
| Q | x1 y1, x y | 绘制二次贝塞尔曲线到点(x,y) |
| T | x y | 特殊版本的二次贝塞尔曲线(省略控制点) |
| Z | 无参数 | 绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。 |
<svg width="325px" height="325px">
<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>
注意
内联样式几乎总是比风格的渲染速度更快的内部或外部的样式表，样式表和类加渲染时间来查找和解析。
简报属性
虽然SVG文档绝大多数将使用样式演示信息，SVG的形式呈现属性允许你指定此信息。而不是说：
<circle cx="10" cy="10" r="5"
style="fill: red; stroke:black; stroke-width: 2;"/><circle cx="10" cy="10" r="5"
fill="red" stroke="black" stroke-width="2"/>如果你以为这是混合结构和表现，你是正确的。简报属性派上用场，不过，当您正在创建XML数据源转换为SVG在第12章中，你会看到SVG文档。在这种情况下，它可以更容易的创建单独的属性，每个演示文稿属性比创建一个单一的风格属性的内容。您可能也需要使用演示如果环境中，你将会把你的SVG不支持样式表的属性。
演示属性是在最底层的优先级列表。来自联，内部或外部的样式表将覆盖任何样式规格介绍属性。在下面的SVG文档，圆圈将被填充为红色，而不是绿色。
<svg width="200" height="200">
<defs>
<style type="text/css"><![CDATA[
circle { fill: red; }
]]></style>
</defs>
<circle cx="20" cy="20" r="15" fill="green"/>
</svg>同样，我们强调的是使用风格属性或样式表应该永远是您的第一选择。样式表可以让你申请了一系列复杂的填充和描边的某些元素在一个文档中出现的所有特性，而无需重复的信息中各个元素，将需要演示属性。样式表的强大功能和灵活性，让你做出重大的变化在外观和感觉的多个文件，用最小的努力。
文件结构 -分组和引用对象
虽然这肯定是未分化的形状和线条的列表，可以定义任何绘图，大多数非抽象艺术组的形状和线条，形成可识别的命名对象。SVG元素，让你做这样的分组，使您的文档更有条理和理解
设为<g>元素收集所有其子元素作为一个群体，往往有一个ID属性给该组唯一的名称。此外，各组可能有其自己的<title> <DESC>，以确定它基于文本的XML应用程序，以帮助视障用户的无障碍。除了 来自组和文档对象的能力的概念清晰，的设为<g>元素也提供了概念上的便利。开始<g>设置标签中指定的任何样式将应用到组中的所有子元素。在例4-5中，这样可以节省我们不必重复的样式
<svg width="240px" height="240px" viewBox="0 0 240 240">
<title>Grouped Drawing</title>
<desc>Stick-figure drawings of a house and people</desc>
<g id="house" style="fill: none; stroke: black;">
<desc>House with door</desc>
<rect x="6" y="50" width="60" height="60"/>
<polyline points="6 50, 36 9, 66 50"/>
<polyline points="36 110, 36 80, 50 80, 50 110"/>
</g>
<g id="man" style="fill: none; stroke: black;">
<desc>Male human</desc>
<circle cx="85" cy="56" r="10"/>
<line x1="85" y1="66" x2="85" y2="80"/>
<polyline points="76 104, 85 80, 94 104" />
<polyline points="76 70, 85 76, 94 70" />
</g>
<g id="woman" style="fill: none; stroke: black;">
<desc>Female human</desc>
<circle cx="110" cy="56" r="10"/>
<polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/>
<line x1="104" y1="104" x2="108" y2="90"/>
<line x1="112" y1="90" x2="116" y2="104"/>
<polyline points="101 70, 110 76, 119 70" />
</g>
</svg>使用元素
<use xlink:href="#house" x="70" y="100"/>
<use xlink:href="#woman" x="-80" y="100"/>
<use xlink:href="#man" x="-30" y="100"/>
的DEFS元素
与前面的例子中，你可能已经注意到一些缺点：
- 数学决定将重新用男人和女人需要你知道的原稿的位置和使用，为你的基地，而不是用一个简单的数字，如零。
- 原来的房子里成立了由填充和描边颜色，不能重写的<use>。这意味着你不能让一排多彩色的房子。
- 该文件提请所有三组：女人，男人和房子。你不能“储存他们离开”，并绘制只有一套房子或一组人。
的<defs>元件解决了这些问题。通过把分组的对象之间的开始和结束<defs>标签，指示SVG来定义它们没有显示他们。SVG规范，事实上，建议你把所有的对象，你想重新使用内<defs>元素使SVG观众的工作流环境中，可以更有效地处理数据。在例4-6中，定义，这样的房子，男人和女人，他 们的左上角为（0，0），房子是没有任何填充颜色。由于组将内<defs>元素，他们将不会被绘制在屏幕上向右走，将作为“模板”供将来使用。我们还建造另一组名为夫妇，其中，反过来，<use>的是男人和女人组。（请注意，图4-6的下半部分可以不使用对夫妇，因为女人是男人的左侧。）
<svg width="240px" height="240px" viewBox="0 0 240 240">
<title>Grouped Drawing</title>
<desc>Stick-figure drawings of a house and people</desc>
<defs>
<g id="house" style="stroke: black;">
<desc>House with door</desc>
<rect x="0" y="41" width="60" height="60"/>
<polyline points="0 41, 30 0, 60 41"/>
<polyline points="30 101, 30 71, 44 71, 44 101"/>
</g>
<g id="man" style="fill: none; stroke: black;">
<desc>Male human</desc>
<circle cx="10" cy="10" r="10"/>
<line x1="10" y1="20" x2="10" y2="44"/>
<polyline points="1 58, 10 44, 19 58"/>
<polyline points="1 24, 10 30, 19 24"/>
</g>
<g id="woman" style="fill: none; stroke: black;">
<desc>Female human</desc>
<circle cx="10" cy="10" r="10"/>
<polyline points="10 20, 10 34, 0 44, 20 44, 10 34"/>
<line x1="4" y1="58" x2="8" y2="44"/>
<line x1="12" y1="44" x2="16" y2="58"/>
<polyline points="1 24, 10 30, 19 24" />
</g>
<g id="couple">
<desc>Male and female human</desc>
<use xlink:href="#man" x="0" y="0"/>
<use xlink:href="#woman" x="25" y="0"/>
</g>
</defs>
<!-- make use of the defined groups -->
<use xlink:href="#house" x="0" y="0" style="fill: #cfc;"/>
<use xlink:href="#couple" x="70" y="40"/>
<use xlink:href="#house" x="120" y="0" style="fill: #99f;"/>
<use xlink:href="#couple" x="190" y="40"/>
<use xlink:href="#woman" x="0" y="145"/>
<use xlink:href="#man" x="25" y="145"/>
<use xlink:href="#house" x="65" y="105" style="fill: #c00;"/>
</svg>
不局限于<use>元素使用相同的文件，它在其中出现的对象; XLINK：HREF属性可以指定任何有效的文件或URI。这使得可以收集在一个SVG文件中的一组的公共元素，并利用它们选择性地从其他文件。例如，您可以创建一个文件名 为identity.svg的，它包含了所有您的组织使用的标识图形：
<g id="company_mascot">
<!-- drawing of company mascot -->
</g>
<g id="company_logo" style="stroke: none;">
<polygon points="0 20, 20 0, 40 20, 20 40"
style="fill: #696;"/>
<rect x="7" y="7" width="26" height="26"
style="fill: #c9c;"/>
</g>
<g id="partner_logo">
<!-- drawing of company partner's logo -->
</g>
然后参考：
<use xlink:href="identity.svg#company_logo" x="200" y="200"/>
符号元素
The symbol Element
<symbol>元素提供分组元素的另一种方式。不像<g>时元素，<symbol>永远不会显示，所以你不要有它括在一个<defs>规范。然而，这是习惯这样做，因为一个符号真的是你定义以供日后使用。此外，符号可以指定的viewBox preserveAspectRatio属性，这样一个符号可以设立的视使用元素融入。例4-7显示了一个简单的组（前两个八角形），宽度和高度都将被忽略，但显示一个符号时使用。在图4-7中右下方的八边形的边缘被切掉，因为preserveAspectRatio已被设置为切片。
<svg width="200px" height="200px" viewBox="0 0 200 200"> <title>Symbols vs. groups</title> <desc>Use</desc> <defs> <g id="octagon" style="stroke: black;"> <desc>Octagon as group</desc> <polygon points=" 36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/> </g> <symbol id="sym-octagon" style="stroke: black;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40"> <desc>Octagon as symbol</desc> <polygon points=" 36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/> </symbol> </defs> <use xlink:href="#octagon" x="40" y="40" width="30" height="30" style="fill: #c00;"/> <use xlink:href="#octagon" x="80" y="40" width="40" height="60" style="fill: #cc0;"/> <use xlink:href="#sym-octagon" x="40" y="80" width="30" height="30" style="fill: #cfc;"/> <use xlink:href="#sym-octagon" x="80" y="80" width="40" height="60" style="fill: #699;"/> </svg>
，虽然<use>让您重新使用SVG文件的部分，在<IMAGE>元素包括整个SVG或光栅文件。如果包括SVG文件，X，Ÿ，宽度和高度属性建立视引用的文件将被绘制;如果你包括光栅文件，它会被缩放，以适应矩形的属性指定。目前可以包括JPEG或PNG光栅文件。例4-8显示了如何将一个JPEG图像使用SVG，其结果是在图4-8。
<svg width="310px" height="310px" viewBox="0 0 310 310">
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/> [1]
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/> [2]
<image xlink:href="kwanghwamun.jpg" [3]
x="72" y="92" [4]
width="160" height="120"/> [5]
</svg>
创建一个灰色的椭圆模拟阴影。[1]
[2]创建主的蓝色椭圆。因为它后，会出现灰色的椭圆，它被显示该对象的上方。
[3]的文件以包括指定的URI。
[4]指定的图像的左上角。
[5]指定应缩放图像的宽度和高度。如果这些都不是，它会出现在原始图像相同的宽高比拉伸或挤压。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
