Question

我有一个SVG文件，我正在插画中编辑。我已经使用了这个文件中的路径信息来创建一个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

中得到了很好的解释

Answer 2

我听到了你的问题。当我写一个SVG到Raphael转换器（第一个）时，我研究了这些问题。转换器将所有变换从路径中取出并将所有坐标从相对变为绝对。在svg Text中，有很多东西可以解决。我写的转换器为转换Text提供了一些支持。我想你可能会尝试通过转换器放置你的SVG并查看它参考文本的javascript。转换器至少输出几种格式，但您可能尝试的2是默认输出。转到converter page

使用默认值上传您的SVG。当您单击“收集Raphael”时，将带您进入生成的交互式JavaScript。这只涉及查看使用文本完成的工作的路径单击“或页面”链接...

如果您需要帮助，我会回来查看......

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

2 个答案: