阅读本文前请先阅读《SVG字体操作》了解svg中如何移动字体以及其字体坐标系。
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<title>Layer 1</title>
<text transform="translate(0,0)" xml:space="preserve" font-family="SimHei" font-size="100" id="svg_1" y="0" x="0" fill="#ff7f00">Love Story宋体</text>
</svg>
上面的代码在画布上画出了“Love Story宋体"
宋体两个字漏了点尾巴出来，而Love Story都在基线0以上。这说明中文溢出了文本框。
删掉英文，修改如下：
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<title>Layer 1</title>
<text transform="translate(0,0)" xml:space="preserve" font-family="SimHei" font-size="100" id="svg_1" y="0" x="0" fill="#ff7f00">宋体</text>
</svg>
结果如下：
情况依旧。
已经知道Love Story的高度为70像素，下面的代码执行看看：
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<title>Layer 1</title>
<text transform="translate(0,70)" xml:space="preserve" font-family="SimHei" font-size="100" id="svg_1" y="0" x="0" fill="#ff7f00">Love Story宋体</text>
</svg>
可以看到，Love Story被完全平移到可视区域了，但宋缺头。
这个给我们带来一个问题：当我们想把中文先移动到原点然后做旋转变换的时候，不知道要移动多少。这个问题在Flex和SVG相互配合时候最为明显。
解决方案： 不要在flex中计算文本外接矩形，而应该在svg中利用js计算。 Flex中计算的基线在svg中是错误滴。
