svg text文字

最新推荐文章于 2024-05-13 09:00:24 发布

原创最新推荐文章于 2024-05-13 09:00:24 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#svg text #svg #text原点变换

Batik 专栏收录该内容

2 篇文章

订阅专栏

背景介绍：最近研究svg生成pdf，那我遇到的问题是我们前端编辑器编辑文字的时候有文字框，文字可以左中右对齐，研究svg的应该知道svg文字没有文字框属性，并且svg文字的原点是左下角，而css的文本框对齐是左上角，我们应该都可以想到用text+rect的组合来实现文字框，但问题是文字的原点如何确定成了问题，那有没有办法把text文字的原点从左下角变换到右上角呢？这个问题我在itext里找到了答案（当然也是自己看svg的文档不够用心，漏掉了matrix这个，因为文档里说如果你没有很好的数学功底就不要考虑使用这个。。。呃呃），transform="matrix(1, 0, 0, 1, 0,35)这个可以把文字原点矩阵变换到左下角，这时候通过text-anchor 和指定text x，y（x=rect的x值+width，y=rect的y+height）的方式实现文本的右对齐，如下是一个带有边框的左对齐的文本框实现。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" width="640" zoomAndPan="magnify" contentStyleType="text/css" height="1008" preserveAspectRatio="xMidYMid meet" version="1.0">
   <g>
      <rect x="0" y="200" fill="rgb(248,331,28)" width="490" height="42" stroke="red" stroke-width="5" />
      <text x="490" font-size="35" y="200" text-decoration="line-through" fill="#000000" font-family="Microsoft YaHei" font-style="italic" font-weight="bold" text-anchor="end" transform="matrix(1, 0, 0, 1, 0,35)">我是super</text>
   </g>
</svg