javascript - 如何将矩阵信息转换为简单的 x 和 y 坐标

Question

我有一个 SVG 文件，正在 illustrator 中编辑。我已经使用该文件中的路径信息来创建 Raphael 对象。我现在想做的是向绘图的某些部分添加文本。问题是 Raphael 只接受 X 和 Y 坐标，而 SVG 文件中的文本是一个矩阵。

基本上我需要改变这个:

<text transform="matrix(1 0 0 1 583 562)" font-size="12">Argentina</text>

变成这样的东西:

var t = paper.text(x, y, "Argentina");

这可能吗？我也尝试过将文本变成轮廓，但生成的路径太复杂，我更喜欢更轻松的东西。

Answer 1

在您的具体情况下，矩阵仅转换为 x: 583 和 y: 562，但如果您的元素被缩放或旋转，那么这些值将产生误导。

您可以直接在 Raphael 中应用变换矩阵，您所需要做的就是......

transformation = Raphael
     .matrix(1, 0, 0, 1, 583, 562)
     .toTransformString();

text = paper
    .text(0, 0, "Argentina")
    .attr("font-size", 12)
    .transform(transformation)​

现在，如果不喜欢对元素应用转换，您可以通过执行 console.log(transformation) 将矩阵转换为更易于阅读的格式，这将为您提供诸如 t100,100r30,100,100s2,2,100,100 之类的字符串，在 Raphael's documentation 中有很好的解释。