我正在使用 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
最佳答案
我发现的最好方法是将文本变成路径。我使用 Inkscape,它具有“对象到路径”功能。我将所有设计文件都保存在文本中以方便更改,并创建一个路径版本以供显示。这是我能找到的最好的解决方法,而且它还意味着您不依赖于系统字体。如果你有很多文本,它会生成巨大的文件!
关于svg - 为动画缩放 SVG 中的文本的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15253375/