将基本的SWF形状转换为SVG

Question

我将以编程方式（在PHP中）将SWF文件的内容导出为SVG格式。因此，我首先尝试导出构成我文件的每个形状，然后再创建静态子画面。 为此，我使用IO_SWF库读取swf文件的内容。

FillStyles:
    [1] solid fill: #d9d2c5(ff)
    [2] solid fill: #8e7e66(ff)
    [3] solid fill: #b9ae9a(ff)
    [4] solid fill: #716044(ff)
LineStyles:
    (none)
ShapeRecords:
    ChangeStyle: MoveTo: (6.95, -10)  FillStyle: 0|2  LineStyle: 0
    StraightEdge: MoveTo: (7, -9.95)
    StraightEdge: MoveTo: (7.2, -9.65)
    StraightEdge: MoveTo: (7.1, -9.45)
    StraightEdge: MoveTo: (6.85, -9)
    ChangeStyle: MoveTo: (6.85, -9)  FillStyle: 0|3  LineStyle: 0
    CurvedEdge: MoveTo: Control(6.8, -7.95) Anchor(6.9, -7.15)
    StraightEdge: MoveTo: (6.95, -6.25)
    StraightEdge: MoveTo: (6.95, -6.15)
    StraightEdge: MoveTo: (7, -6.15)
    ChangeStyle: MoveTo: (7, -6.15)  FillStyle: 0|1  LineStyle: 0
    StraightEdge: MoveTo: (6.95, -5.85)
    ChangeStyle: MoveTo: (6.95, -5.85)  FillStyle: 0|2  LineStyle: 0
    StraightEdge: MoveTo: (6.5, -5.2)
    StraightEdge: MoveTo: (4.15, -2.3)
    StraightEdge: MoveTo: (3.55, -2.15)
    ChangeStyle: MoveTo: (3.55, -2.15)  FillStyle: 0|4  LineStyle: 0
    CurvedEdge: MoveTo: Control(3.7, -3.9) Anchor(5.35, -8.85)
    StraightEdge: MoveTo: (6.45, -10.85)
    CurvedEdge: MoveTo: Control(6.55, -10.45) Anchor(6.95, -10)
    ChangeStyle: MoveTo: (6.95, -10)  FillStyle: 2|4  LineStyle: 0
    StraightEdge: MoveTo: (6.2, -8.9)
    ChangeStyle: MoveTo: (6.2, -8.9)  FillStyle: 2|3  LineStyle: 0
    StraightEdge: MoveTo: (6.85, -9)
    ChangeStyle: MoveTo: (6.2, -8.9)  FillStyle: 3|4  LineStyle: 0
    StraightEdge: MoveTo: (6.15, -7.85)
    StraightEdge: MoveTo: (6.15, -7.7)
    StraightEdge: MoveTo: (6.2, -7.55)
    StraightEdge: MoveTo: (6.2, -6.9)
    StraightEdge: MoveTo: (6.25, -6.75)
    ChangeStyle: MoveTo: (6.25, -6.75)  FillStyle: 3|1  LineStyle: 0
    StraightEdge: MoveTo: (6.35, -6.2)
    CurvedEdge: MoveTo: Control(6.4, -6) Anchor(6.7, -5.95)
    StraightEdge: MoveTo: (7, -6.15)
    ChangeStyle: MoveTo: (4.4, -3.2)  FillStyle: 2|4  LineStyle: 0
    StraightEdge: MoveTo: (4.15, -2.95)
    StraightEdge: MoveTo: (3.55, -2.15)
    ChangeStyle: MoveTo: (6.95, -5.85)  FillStyle: 2|1  LineStyle: 0
    StraightEdge: MoveTo: (6.95, -5.9)
    StraightEdge: MoveTo: (6.8, -5.95)
    StraightEdge: MoveTo: (6.7, -5.95)
    StraightEdge: MoveTo: (6.5, -5.9)
    StraightEdge: MoveTo: (6.3, -5.8)
    StraightEdge: MoveTo: (4.4, -3.2)
    ChangeStyle: MoveTo: (4.4, -3.2)  FillStyle: 4|1  LineStyle: 0
    StraightEdge: MoveTo: (6.15, -5.85)
    StraightEdge: MoveTo: (6.25, -6.75)
    ChangeStyle: MoveTo: (0, 0)  FillStyle: 0|0  LineStyle: 0

经过研究，我了解了如何根据这些数据构建svg（由路径标签组成）。

ChangeStyle => start a new path => M x,y
StraightEdge => line => L x,y
CurvedEdge => curve => Q cx,cy,ax,ay

对于每个路径：

FillStyle: {FillStyle0} | {FillStyle1} (0 => no fill style)
The index is related to the FillStyles array

LineStyle: {LineStyle} (0 => line style)
The index is related to the LineStyles array

但这不是浏览结构的正确方法。 使用JPEXS Decompiler手动导出以前的样本形状，可以得到完美的跟踪SVG。 比较一下：

My result vs what is expected

我产生的svg：

<path fill="rgba(185, 174, 154, 1)" fill-rule="evenodd" stroke="none" d="M 6.95 -10 L 7 -9.95 L 7.2 -9.65 L 7.1 -9.45 L 6.85 -9 L 6.95 -10" />
<path fill="rgba(217, 210, 197, 1)" fill-rule="evenodd" stroke="none" d="M 6.85 -9 Q 6.8 -7.95 6.9 -7.15 L 6.95 -6.25 L 6.95 -6.15 L 7 -6.15 L 6.85 -9" />
<path fill="rgba(142, 126, 102, 1)" fill-rule="evenodd" stroke="none" d="M 7 -6.15 L 6.95 -5.85 L 7 -6.15" />
<path fill="rgba(113, 96, 68, 1)" fill-rule="evenodd" stroke="none" d="M 6.95 -5.85 L 6.5 -5.2 L 4.15 -2.3 L 3.55 -2.15 L 6.95 -5.85" />
<path fill="rgba(142, 126, 102, 1)" fill-rule="evenodd" stroke="none" d="M 3.55 -2.15 Q 3.7 -3.9 5.35 -8.85 L 6.45 -10.85 Q 6.55 -10.45 6.95 -10 L 3.55 -2.15" />
<path fill="rgba(142, 126, 102, 1)" fill-rule="evenodd" stroke="none" d="M 6.95 -10 L 6.2 -8.9 L 6.95 -10" />
<path fill="rgba(185, 174, 154, 1)" fill-rule="evenodd" stroke="none" d="M 6.2 -8.9 L 6.85 -9 L 6.2 -8.9" />
<path fill="rgba(185, 174, 154, 1)" fill-rule="evenodd" stroke="none" d="M 6.2 -8.9 L 6.15 -7.85 L 6.15 -7.7 L 6.2 -7.55 L 6.2 -6.9 L 6.25 -6.75 L 6.2 -8.9" />
<path fill="rgba(142, 126, 102, 1)" fill-rule="evenodd" stroke="none" d="M 6.25 -6.75 L 6.35 -6.2 Q 6.4 -6 6.7 -5.95 L 7 -6.15 L 6.25 -6.75" />
<path fill="rgba(142, 126, 102, 1)" fill-rule="evenodd" stroke="none" d="M 4.4 -3.2 L 4.15 -2.95 L 3.55 -2.15 L 4.4 -3.2" />
<path fill="rgba(113, 96, 68, 1)" fill-rule="evenodd" stroke="none" d="M 6.95 -5.85 L 6.95 -5.9 L 6.8 -5.95 L 6.7 -5.95 L 6.5 -5.9 L 6.3 -5.8 L 4.4 -3.2 L 6.95 -5.85" />

JPEXS结果：

<path d="M7.0 -6.15 L6.95 -5.85 6.95 -5.9 6.8 -5.95 6.7 -5.95 6.5 -5.9 6.3 -5.8 4.4 -3.2 6.15 -5.85 6.25 -6.75 6.35 -6.2 Q6.4 -6.0 6.7 -5.95 L7.0 -6.15" fill="#d9d2c5" fill-rule="evenodd" stroke="none" />
<path d="M6.95 -10.0 L7.0 -9.95 7.2 -9.65 7.1 -9.45 6.85 -9.0 6.2 -8.9 6.95 -10.0 M6.95 -5.85 L6.5 -5.2 4.15 -2.3 3.55 -2.15 4.15 -2.95 4.4 -3.2 6.3 -5.8 6.5 -5.9 6.7 -5.95 6.8 -5.95 6.95 -5.9 6.95 -5.85" fill="#8e7e66" fill-rule="evenodd" stroke="none" />
<path d="M6.85 -9.0 Q6.8 -7.95 6.9 -7.15 L6.95 -6.25 6.95 -6.15 7.0 -6.15 6.7 -5.95 Q6.4 -6.0 6.35 -6.2 L6.25 -6.75 6.2 -6.9 6.2 -7.55 6.15 -7.7 6.15 -7.85 6.2 -8.9 6.85 -9.0" fill="#b9ae9a" fill-rule="evenodd" stroke="none" />
<path d="M3.55 -2.15 Q3.7 -3.9 5.35 -8.85 L6.45 -10.85 Q6.55 -10.45 6.95 -10.0 L6.2 -8.9 6.15 -7.85 6.15 -7.7 6.2 -7.55 6.2 -6.9 6.25 -6.75 6.15 -5.85 4.4 -3.2 4.15 -2.95 3.55 -2.15" fill="#716044" fill-rule="evenodd" stroke="none" />

总而言之，如何从数据结构中获取相同格式的SVG？我敢肯定，FillStyle0和FillStyle1有什么可替代之处，但是哪一个呢？

感谢您的帮助。