iText 7 SVGConverter无法呈现预期的效果

Question

我想在pdf页面上添加来自客户端的SVG。在客户端上查看SVG以及SVG映像时，它看起来像预期的那样。但是，当将SVG添加到pdf时，字体，轴，网格线等内容无法按预期绘制。

我尝试使用CSS定义来定义字体和轴定义，但是它们都没有影响PDF的输出。我使用了一些非标准字体，但是即使尝试了Arial，该字体也没有出现在PDF中。

我正在使用iText 7.1.6

预期图表：

PDF中生成的SVG：

代码

string fPath = System.IO.Path.Combine(fFolder, fName);

DateTime dateTime = DateTime.Now;

PdfWriter writer = new PdfWriter(fPath);
PdfDocument pdf = new PdfDocument(writer);
Document doc = new Document(pdf, PageSize.A4);

string svg = System.IO.File.ReadAllText(@"C:\Users\Public\Desktop\cData.txt");

byte[] byteArray = Encoding.UTF8.GetBytes(svg);

using (MemoryStream ms = new MemoryStream(byteArray))
{

    Image image = SvgConverter.ConvertToImage(ms, pdf);
    image.SetFixedPosition(0, 400);
    image.ScaleToFit(500, 360);
    doc.Add(image);
}

doc.Close();

SVG代码（复制到txt文件中

 <svg xmlns="http://www.w3.org/2000/svg" id="reportChartNAVSvg" width="1000" height="720"><defs><style type="text/css">
    .axis--x path { display: none; }
    .axis--y--right path { display: none; }
    .grid line { stroke: #d9d9d9; shape-rendering: crispEdges; }
    .grid path { stroke-width: 0; }
    .line { fill: none; stroke-width: 1.5px; }
    .line-factsheet { color: rgb(198, 180, 147); }
    .bar-factsheet { fill: #faf1d6; stroke: #c6b493; }
    </style></defs><g transform="translate(52 52)"><g class="print" style="font-family: Arial; font-size: 26px;"><rect style="fill: #c6b493;" x="114.667" y="617.95" width="52" height="5.2" /><text x="179.6667" y="630.95">Index Performance (CHF)</text></g><g class="grid" font-family="sans-serif" font-size="10" fill="none" text-anchor="end"><path class="domain" style="opacity: 0;" stroke="currentColor" d="M 948 525.5 H 0.5 V 0.5 H 948" /><g class="tick" opacity="1" transform="translate(0 525.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 420.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 315.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 210.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 105.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 0.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g><g class="tick" opacity="1" transform="translate(0 -104.5)"><line style="opacity: 0.7; stroke: #d9d9d9;" stroke="currentColor" x2="948" /><text fill="currentColor" x="-3" dy="0.32em" /></g></g><g class="axis axis-x" font-family="sans-serif" font-size="10" style="font-family: Arial; font-size: 26px;" fill="none" text-anchor="middle" transform="translate(0 525)"><path class="domain" stroke="currentColor" d="M 0.5 0.5 H 948.5" /><g class="tick" opacity="1" transform="translate(69.4825 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Okt 16</text></g><g class="tick" opacity="1" transform="translate(171.89 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Jan 17</text></g><g class="tick" opacity="1" transform="translate(271.98 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Apr 17</text></g><g class="tick" opacity="1" transform="translate(373.228 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Jul 17</text></g><g class="tick" opacity="1" transform="translate(475.589 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Okt 17</text></g><g class="tick" opacity="1" transform="translate(577.997 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Jan 18</text></g><g class="tick" opacity="1" transform="translate(678.087 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Apr 18</text></g><g class="tick" opacity="1" transform="translate(779.335 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Jul 18</text></g><g class="tick" opacity="1" transform="translate(881.696 0.1)"><line stroke="currentColor" y2="0" /><text fill="currentColor" y="3" dy="39">Okt 18</text></g></g><g class="axis axis-y-left" font-family="sans-serif" font-size="10" style="font-family: Arial; font-size: 26px;" fill="none" text-anchor="end"><path class="domain" stroke="currentColor" d="M 0.5 525.5 V 0.5" /><g class="tick" opacity="1" transform="translate(0 525.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">97</text></g><g class="tick" opacity="1" transform="translate(0 420.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">98</text></g><g class="tick" opacity="1" transform="translate(0 315.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">99</text></g><g class="tick" opacity="1" transform="translate(0 210.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">101</text></g><g class="tick" opacity="1" transform="translate(0 105.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">102</text></g><g class="tick" opacity="1" transform="translate(0 0.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">103</text></g><g class="tick" opacity="1" transform="translate(0 -104.5)"><line stroke="currentColor" x2="0" /><text style="opacity: 1; text-anchor: end;" fill="currentColor" x="-3" dx="-6.5" dy="0.32em">104</text></g></g><g><path style="fill: none; stroke: #c6b493; stroke-width: 8;" d="M 0 262.5 L 3.33786 262.5 L 34.4913 290.938 L 67.8699 290.938 L 102.408 371.438 L 135.786 409.5 L 165.827 365.313 L 170.277 368.813 L 204.769 346.5 L 235.922 237.563 L 270.367 225.75 L 300.408 197.313 L 303.746 183.267 L 338.237 154.738 L 371.616 228.914 L 406.107 178.439 L 440.598 163.516 L 473.977 152.104 L 508.514 122.697 L 541.893 148.154 L 571.934 111.724 L 576.384 122.258 L 610.876 96.8008 L 642.029 199.068 L 674.249 217.064 L 676.474 217.064 L 706.515 217.064 L 709.853 157.823 L 744.344 202.917 L 777.723 236.516 L 812.214 224.579 L 846.705 285.588 L 880.084 320.513 L 914.621 425.732 L 948 461.099" /></g></g></svg>

Answer 1

我能够在PDF上绘制适当的SVG。使用以下代码，我可以解决有关字体的问题。如果需要以正确的语言显示字符，则使用适当的编码很重要。

FontProvider provider = new FontProvider();
        provider.AddFont(FontProgramFactory.CreateFont(@"C:\Windows\Fonts\lte50144.ttf"));

        SvgConverterProperties props = new SvgConverterProperties();
        props.SetCharset("Windows-1252");
        props.SetFontProvider(provider);

        byte[] byteArray = Encoding.GetEncoding(1252).GetBytes(svg);

        using (MemoryStream ms = new MemoryStream(byteArray))
        {

            Image image = SvgConverter.ConvertToImage(ms, pdf, props);
            image.SetFixedPosition(llx, lly);
            image.ScaleToFit(width, height);
            doc.Add(image);
        }

SVG本身是在d3.js中生成的。移动的x轴来自父级上的某些transform元素，在子级上会被忽略。通过遍历这些元素，删除父级上的transform并在子级上设置绝对位置即可解决此问题。