<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 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。
在下面的示例中，用户坐标系统等效于隐式视区坐标系统。
针对你的需求来看，用css3来操作我觉得不是很恰当。目前能够良好的支持CSS3的浏览器全都对SVG支持良好，使用SVG构建矢量图图标是比较合适的，即使你需要兼容IE6，使用raphael.js也可以办到，目前这个js已经整合到最新的ext4.0.7.js中。
通常的html元素都不是矢量图，缩放可能带来问题，这个HTML元素都无法控制，CSS更是鞭长莫及了
如何使用CSS来修改SVG原点和制作SVG动画SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个<div>和一个SVG <rect>元素：
<!DOCTYPE html>
