SVG中对中文高度计算的“特殊处理”
发布时间:2020-12-15 01:03:38 所属栏目:百科 来源:网络整理
导读:阅读本文前请先阅读《SVG字体操作》了解svg中如何移动字体以及其字体坐标系。 svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" !-- Created with SVG-edit - http://svg-edit.googlecode.com/ -- g titleLayer 1/title text transform="tr
阅读本文前请先阅读《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中是错误滴。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |