在用于动画的SVG中缩放文本的问题

Question

我正在使用SVG生成视频动画，我制作了一个图像序列，并将其转换为视频文件。我需要的一个效果是能够平滑地平移/缩放文本。我试图通过将转换应用于包含文本的图形上下文来实现这一点。每个帧的比例/平移都有很小的变化。这项技术对静态图像效果很好。但不是用来写文本。我看到的效果并不像你预期的那样平滑。从一帧到另一帧，文本有一定的抖动/闪光。这就好像字体渲染规则是在转换后(而不是转换前)应用的。

所以问题是:如何在文本中实现平滑的缩放/平移效果？

一个帧的示例：

<svg width='320' height='180'>
<rect x='0' y='0' width='320' height='180' fill='white' />
<g transform='scale(5.999999999999893)'><text x='50' y='50'>Hello World!</text>
</g></svg>

以下是一段视频剪辑，演示了我的意思：http://www.youtube.com/watch?v=TrEjDeGlPhA&list=UUfWuDb3rpD5OInqUpNivjdA&index=1

或者您可以从头开始创建:我编写了一个小Java程序，它将生成这些帧，并创建一个AVI文件进行演示(假设Linux、mencoder、rsvg-convert可用)。

import java.io.File;
import java.io.Writer;
import java.io.FileWriter;
import java.io.IOException;

public class MakeTextScaleAnimation {

public static void main (String[] arg) throws Exception {

    double s;

    int frame = 0;
    for (s=1.0; s < 8.0; s+=0.005) {
        String framePrefix = "frame" + String.format("%04d", frame);
        File frameFile = new File (framePrefix + ".svg");
        FileWriter w = new FileWriter(frameFile);
        writeFrame(w,s);
        w.close();

        frame++;

        System.out.println ("rsvg-convert " + frameFile.getName() + " > " + framePrefix + ".png");
    }
}

private static void writeFrame(Writer w, double s) throws IOException {
    w.write ("<svg width='320' height='180'>\n");
    w.write ("<rect x='0' y='0' width='320' height='180' fill='white' />\n");
    w.write ("<g transform='scale(" + s + ")'>");
    w.write ("<text x='50' y='50'>Hello World!</text>\n");
    w.write ("</g></svg>");
}
}

并运行以下脚本：

#!/bin/bash
javac MakeTextScaleAnimation.java 

# Make SVG animation frames and generate script to convert to PNG
java MakeTextScaleAnimation  > svgtopng.sh

# Convert SVG frames into PNG images
. svgtopng.sh

# Convert the PNG images into a movie file
mencoder mf://frame*.png -mf fps=24:type=png \
-ovc lavc -lavcopts vcodec=mpeg4:vbitrate=3200 \
-o output.avi

Answer 1

我找到的最好的方法是将文本转换为路径。我使用Inkscape，它有一个'object to path‘函数。我将设计文件全部保存在文本中，以便于更改，并创建一个路径版本以供显示。这是我能找到的最好的变通方法，这也意味着你不需要依赖系统字体。如果你有很多文本，它会生成很大的文件！