将SVG textPath转换为变换矩阵

时间:2017-09-06 21:19:20

标签: svg cross-browser kindle

我在电子书中有一个用SVG格式化的标题页,使用textPath沿曲线放置文字:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 160 256" width="160" height="256">
  <g style="text-align:center;text-anchor:middle;stroke:none;stroke-width:0;">
    <path style="fill:none;"
      d="m 0,72 c 32,-16 52,-20 80,-20 28,0 48,4 80,20"
      id="path-upper" />
    <text style="font-size:9px;"><textPath xlink:href="#path-upper" startOffset="50%"><tspan>Text to be Placed Along a Curve</tspan></textPath></text>
  </g>
</svg>

问题在于许多电子书平台(最重要的是Kindle)不支持textPath。我想做的是将textPath的结果“编译”成旋转文本。

运行

$ inkscape -A curve.pdf --export-ignore-filters curve.svg
$ inkscape -l curve2.svg curve.pdf

有点工作,屈服(例如)

<text transform="matrix(0.94068351,0.33928532,0.33928532,-0.94068351,17.864857,145.9156)"><tspan y="0" x="0">T</tspan></text>
<text transform="matrix(0.94997891,0.31231406,0.31231406,-0.94997891,20.665461,146.93493)"><tspan y="0" x="0">e</tspan></text>
<text transform="matrix(0.96048875,0.27831882,0.27831882,-0.96048875,24.497618,148.19598)"><tspan y="0" x="0">x</tspan></text>
<text transform="matrix(0.96875188,0.24803186,0.24803186,-0.96875188,28.337099,149.29823)"><tspan y="0" x="0">t</tspan></text>

但它也重写了我的SVG文件的其余部分 - 最烦人的是,添加了一个全局变换(transform="matrix(1.3333333,0,0,-1.3333333,0,256)"),这使得所有内容都更难阅读和理解。

是否有其他工具或代码可用于从路径以编程方式生成这些旋转矩阵?

(否则,我需要的是一个工具,在Inkscape破坏了东西之后,在SVG文件中组合了变换矩阵,但这是一个不同的问题。)

0 个答案:

没有答案