<g id="parentGraphic" style="stroke: bluefill: blue">
<rect x="5%" y="5%" width="90%" height="90%" rx="10" ry="10"
style="fill: nonestroke-width: 2px"/>
<text x="50%" y="97.2%" style="text-anchor: middle">
This text is going to get extremely small.
</text>
<text x="95.4%" y="50%" style="writing-mode: tbtext-anchor: middle">
The <tspan style="stroke: red">red</tspan>center dot is to the left.
</text>
<text x="3.3%" y="50%" style="writing-mode: tbtext-anchor: middle">
The <tspan style="stroke: redfill: red">red</tspan>center dot is to the right.
</text>
</g>
在 HTML5 内联 SVG 测试图形示例中，这个组合的 SVG 图形 (<g id="parentGraphic" ...>) 减小了尺寸并且多次重复使用以通过多次调用use 元素创建之前显示的测试图形。例如：
<use href="#parentGraphic" … />
use 元素创建了引用元素的副本（以及该元素中包含的所有子元素）。
另请注意，SVG text-anchor: middle 样式可轻松将文本居中显示，而 writing-mode: tb 可按垂直方式显示文本。
与最新的 CSS 转换一样，SVG 始终支持相同的概念，包括转换、缩放和旋转。要围绕某个中心点按给定因子缩放图形，可以使用以下伪代码：
transform="translate( -centerX*(factor-1), -centerY*(factor-1) ) scale(factor)"
在此伪代码中，(centerX, centerY) 表示中心点的 (x, y) 坐标，而 factor 是所需的比例因子。
在此示例中，SVG 视区为 800 x 600 像素，视区的中心位于 (400, 300)。要将 parentGraphic 缩小 10%（即比例因子为 0.9），可以使用（在伪代码中）：
transform="translate( -400*(0.9-1), -300*(0.9-1) ) scale(0.9)"
这将简化为下面的非伪代码：
transform="translate(40, 30) scale(0.9)"
然后，可将其直接应用于 use 元素来获得所需效果：
<use href="#parentGraphic" transform="translate(40, 30) scale(0.9)"/>
此技术用于减少和集中其余 10 个版本的 parentGraphic。
现在，我们将使用这个测试图形来演示如何采用两种方法在 SVG 中进行缩放和平移：基于浏览器和基于脚本。
基于浏览器的 SVG 缩放和平移
对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。在 Internet Explorer 9 中，下表描述了与缩放相关的鼠标和键盘快捷方式。
用户操作
键盘快捷键
鼠标快捷键
放大
Ctrl + 加号
Ctrl + <向前滚动滚轮>
缩小
Ctrl + 减号
Ctrl + <向后滚动滚轮>
返回默认缩放级别
Ctrl + 0
不适用
使用浏览器的滚动条可在缩放图中轻松进行平移。
基于 JavaScript 的 SVG 缩放和平移
由于针对缩放和/或平移的用户界面可能随浏览器的不同而不同（或出于其他原因），因此实现你自己的基于 JavaScript 的缩放和平移功能很有用。下面提供了针对这两种情况的示例。
JavaScript 缩放
该示例使用两个按钮和鼠标滚轮啦放大和缩小测试图像：当前比例 SVG 缩放。
尽管通过注释很好地记录了此示例，但仍需注意以下几点：
用于调整测试图大小（或缩放级别）的技术是 svg 元素的 currentScale 特性。
mousewheel 事件已与 window 元素挂接（与 svg 或 body 元素相对），这样一来，无论缩放级别如何，鼠标滚轮在整个网页上都是活动的。
需要 svg 元素的 viewBox 属性以避免与缩放有关的呈现问题（在没有 viewBox 属性的情况下进行尝试即可观察该问题）。
JavaScript 平移
在放大某个特定 SVG 图后，能够移动（平移）图形以查看各种放大功能会很有用。以下示例使用箭头键来平移一个简单的 SVG 图像（蓝色圆圈）：SVG 平移。
在此示例中，平移（和下一个示例中的缩放）是通过操作 svg 元素的 viewBox 特性的值来实现的。viewBox 属性的值（一个包含四个数字的字符串）在用户空间中指定了一个矩形，该矩形将映射到视区边界（由svg 元素建立）。通过使用有助于教学的非标准词汇，可按如下方式描述
viewBox 语法：
viewBox="ULCx ULCy UUwidth UUheight"
注意 ULCx 和 ULCy 分别表示“左上角 x”和“左上角 y”。UUwidth 和UUheight 分别表示“用户单位宽度”和“用户单位高度”。
通常，会相对于此用户空间/在此用户空间（即用户坐标系统）内绘制 SVG 图形对象。对于利用相对静态图形进行缩放和平移，SVG
图形对象通常决不会在其用户坐标系统内移动；相反，将在 SVG 视区内/相对于 SVG
视区移动用户坐标系统（及其所有“已附带”图形）。因此，从视区的角度来看，已移动图形对象。换言之，通常你可以移动或转换“已附带”图形对象的用户坐标系统，而非图形对象本身。
牢记上述内容，可按如下方式解释 4 个数字（ULCx、ULCy、UUwidth 和 UUheight）：
ULCx 和 ULCy - 移动用户坐标系统（在其中绘制图形对象的区域）的原点，这样点 (ULCx,
ULCy) 将出现在定义的 SVG 视区的左上角。也就是说，在视区内以可视方式移动用户坐标系统，这样用户坐标点 (ULCx,
ULCy) 将出现在 SVG 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。
在下面的示例中，用户坐标系统等效于隐式视区坐标系统。
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML
body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px"
width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
SVG画圆：
SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D"
stroke-width="2"定义圆周线条颜色和宽度。
SVG矩形:
同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用
fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5"
为 stroke 和 filling 都添加了透明度。
SVG椭圆：
我们同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208stroke:blackstroke-width:3"。
SVG多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63BCF7stroke:blackstroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
针对你的需求来看，用css3来操作我觉得不是很恰当。目前能够良好的支持CSS3的浏览器全都对SVG支持良好，使用SVG构建矢量图图标是比较合适的，即使你需要兼容IE6，使用raphael.js也可以办到，目前这个js已经整合到最新的ext4.0.7.js中。
通常的html元素都不是矢量图，缩放可能带来问题，这个HTML元素都无法控制，CSS更是鞭长莫及了
