如何修复 .SVG 图像中错位但显示在 .PNG 中正确位置的文本？

Question

我正在使用 SVGNet 绘制 SVG 图像并将它们保存为 .svg 和 .png 格式。但是，当我添加文本并旋转它时，.png 文件可以正确显示图像，但 .svg 文件不能。

我正在探索 SvgNet，对我必须动态生成的绘图类型进行硬编码。但是，我似乎无法解决这个问题。我尝试了不同的轮换和添加翻译，但无济于事。如果我不添加任何转换，它甚至不会添加间距，文本元素会显示在彼此之上。

这是所有代码，除了保存到 .svg 和 .png。

SvgDocument x = new SvgDocument();
x.Width = 2500;
x.Height = 2500;

List<string> exemplosParagem = new List<string>
{
    "Paragem 1",
    "Paragem 2",
    "Paragem 3",
    "Paragem 4",
    "Paragem 5",
    "Paragem 6",
    "Paragem 7",
    "Paragem 8",
    "Paragem 9",
    "Paragem 10",
    "O Que Acontece",
    "Se o Texto for de",
    "Tamanhos",
    "Diferentes"
};

SvgUnitCollection textPositionX = new SvgUnitCollection
{
    1250
};

SvgUnitCollection textPositionY = new SvgUnitCollection
{
    100
};

SvgGroup title = new SvgGroup();
title.Children.Add(new SvgText
{
    Text = "Teste Espinha SVG Library",
    FontSize = 80,
    Fill = new SvgColourServer(Color.Blue),
    Stroke = new SvgColourServer(Color.Black),
    StrokeWidth = 3,
    TextAnchor = SvgTextAnchor.Middle,
    X = textPositionX,
    Y = textPositionY
});


SvgGroup spineLine = new SvgGroup();
spineLine.Children.Add(new SvgLine
{
    StrokeWidth = 10,
    Stroke = new SvgColourServer(Color.Black),
    StartX = 100,
    StartY = 600,
    EndX = 2300,
    EndY = 600,
});


SvgGroup rect = new SvgGroup();
rect.Children.Add(new SvgRectangle
{
    Fill = new SvgColourServer(Color.LightBlue),
    Stroke = new SvgColourServer(Color.Black),
    StrokeWidth = 2,
    Width = x.Width - 50,
    Height = x.Height - spineLine.Bounds.Bottom - 100,
    X = 25,
    Y = spineLine.Bounds.Bottom + 100,
});

SvgUnitCollection paragensPositionX = new SvgUnitCollection
{
    spineLine.Bounds.X
};

SvgUnitCollection paragensPositionY = new SvgUnitCollection
{
   spineLine.Bounds.Top
};

List<SvgText> svgText = new List<SvgText>();

for (int i = 0; i < exemplosParagem.Count; i++)
{
    SvgText aux = new SvgText
    {
        Text = exemplosParagem[i],
        Color = new SvgColourServer(Color.Black),
        FontSize = 20,
        X = paragensPositionX,
        Y = paragensPositionY
    };

    SvgTransformCollection transCollect = new SvgTransformCollection();
    SvgRotate rotation = new SvgRotate(-35, aux.Bounds.X, aux.Bounds.Y);
    transCollect.Add(rotation);

    aux.Transforms = transCollect;

    paragensPositionX[0] += (spineLine.Bounds.Width / exemplosParagem.Count);

    svgText.Add(aux);
}


foreach (var stop in svgText)
{
    spineLine.Children.Add(stop);
}

x.Children.Add(title);
x.Children.Add(spineLine);
x.Children.Add(rect);

var bitmap = x.Draw();

下面分别是.png和.svg这段代码生成的图片。 PNG 图片是正确的。

Answer 1

原来我必须在循环中创建 paragensPositionX。

SvgUnitCollection paragensPositionX = new SvgUnitCollection();
if (i == 0)
{
    paragensPositionX.Add(spineLine.Bounds.X);
}
else
{
    paragensPositionX.Add(auxSpacing + spacing);
}

如何修复 .SVG 图像中错位但显示在 .PNG 中正确位置的文本？

How to fix text being misplaced in .SVG image but showing in the correct place in .PNG?

.net

c#

svg

png

drawing