学步园

阅读本文前请先阅读《SVG字体操作》了解svg中如何移动字体以及其字体坐标系。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <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>
 </g>
</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/ -->
 <g>
  <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>
 </g>
</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/ -->
 <g>
  <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>
 </g>
</svg>

可以看到，Love Story被完全平移到可视区域了，但宋缺头。

这个给我们带来一个问题：当我们想把中文先移动到原点然后做旋转变换的时候，不知道要移动多少。这个问题在Flex和SVG相互配合时候最为明显。

解决方案： 不要在flex中计算文本外接矩形，而应该在svg中利用js计算。 Flex中计算的基线在svg中是错误滴。