【问题标题】:Why does the SVG diagram behave differently in the generated PDF than in the browser?为什么 SVG 图表在生成的 PDF 中的行为与在浏览器中的行为不同?
【发布时间】:2019-05-17 11:11:04
【问题描述】:

我想根据一些先前计算的数据生成图表。该图应与更多信息一起在 PDF 上。 Apache Fop 2.0 用于生成 PDF,但生成的 PDF 看起来与浏览器中的 SVG 不同。

  • SVG:
  • PDF

SVG 图形在所有经过测试的浏览器(IE、Chrome、Firefox)中看起来都一样。我已经尝试将 SVG 代码插入到 fo:instream-foreign-object 标记中,或者将单独的文件包含在 fo:external-graphic 中,但两种变体的行为相同。我还尝试将 SVG 图像导出为另一种格式,例如 PNG,但导出的图像看起来也像 PDF 版本。

我必须进行哪些更改才能使 SVG 图形在浏览器和生成的 PDF 中的行为相同?

这是生成的.svg

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="800" version="1.1" viewport="0 0 1000 800">
    <g>
        <!--Styles-->
        <style>
            .x { font: bold 12pt sans-serif; } .y { font: bold 12pt sans-serif; } .title { font: 12pt sans-serif; }
        </style>
        <!--Grid-->
        <defs>
            <pattern id="grid" width="67" height="23" x="100" y="100" patternUnits="userSpaceOnUse">
                <path fill="none" stroke="gray" stroke-width="0.5" d="M 67 0 L 0 0 0  23"/>
            </pattern>
        </defs>
        <g transform="translate(0,800) scale(1,-1)" x="100" y="100">
            <rect width="800" height="600" x="100" y="100" fill="url(#grid)"/>
        </g>
        <!--X-Achse-->
        <line x1="100" x2="900" y1="700" y2="700" style="stroke:black"/>
        <text class="title" dx="500" dy="750" text-anchor="middle">
            Abstand in mm
        </text>
        <!--Y-Achse-->
        <line x1="100" x2="100" y1="100" y2="700" style="stroke:black"/>
        <text class="title" dx="20" dy="400" text-anchor="middle" writing-mode="tb">
            Last in kg
        </text>
        <!--X-Text-->
        <text class="x" dx="100" dy="725" text-anchor="middle">
            0
        </text>
        <text class="x" dx="167" dy="725" text-anchor="middle">
            100
        </text>
        <text class="x" dx="234" dy="725" text-anchor="middle">
            200
        </text>
        <text class="x" dx="301" dy="725" text-anchor="middle">
            300
        </text>
        <text class="x" dx="368" dy="725" text-anchor="middle">
            400
        </text>
        <text class="x" dx="435" dy="725" text-anchor="middle">
            500
        </text>
        <text class="x" dx="502" dy="725" text-anchor="middle">
            600
        </text>
        <text class="x" dx="569" dy="725" text-anchor="middle">
            700
        </text>
        <text class="x" dx="636" dy="725" text-anchor="middle">
            800
        </text>
        <text class="x" dx="703" dy="725" text-anchor="middle">
            900
        </text>
        <text class="x" dx="770" dy="725" text-anchor="middle">
            1000
        </text>
        <text class="x" dx="837" dy="725" text-anchor="middle">
            1100
        </text>
        <!--Y-Text-->
        <text class="y" dx="90" dy="698" text-anchor="end">
            0
        </text>
        <text class="y" dx="90" dy="672" text-anchor="end">
            1000
        </text>
        <text class="y" dx="90" dy="646" text-anchor="end">
            2000
        </text>
        <text class="y" dx="90" dy="620" text-anchor="end">
            3000
        </text>
        <text class="y" dx="90" dy="594" text-anchor="end">
            4000
        </text>
        <text class="y" dx="90" dy="568" text-anchor="end">
            5000
        </text>
        <text class="y" dx="90" dy="542" text-anchor="end">
            6000
        </text>
        <text class="y" dx="90" dy="516" text-anchor="end">
            7000
        </text>
        <text class="y" dx="90" dy="490" text-anchor="end">
            8000
        </text>
        <text class="y" dx="90" dy="464" text-anchor="end">
            9000
        </text>
        <text class="y" dx="90" dy="438" text-anchor="end">
            10000
        </text>
        <text class="y" dx="90" dy="412" text-anchor="end">
            11000
        </text>
        <text class="y" dx="90" dy="386" text-anchor="end">
            12000
        </text>
        <text class="y" dx="90" dy="360" text-anchor="end">
            13000
        </text>
        <text class="y" dx="90" dy="334" text-anchor="end">
            14000
        </text>
        <text class="y" dx="90" dy="308" text-anchor="end">
            15000
        </text>
        <text class="y" dx="90" dy="282" text-anchor="end">
            16000
        </text>
        <text class="y" dx="90" dy="256" text-anchor="end">
            17000
        </text>
        <text class="y" dx="90" dy="230" text-anchor="end">
            18000
        </text>
        <text class="y" dx="90" dy="204" text-anchor="end">
            19000
        </text>
        <text class="y" dx="90" dy="178" text-anchor="end">
            20000
        </text>
        <text class="y" dx="90" dy="152" text-anchor="end">
            21000
        </text>
        <text class="y" dx="90" dy="126" text-anchor="end">
            22000
        </text>
        <text class="y" dx="90" dy="100" text-anchor="end">
            23000
        </text>
        <!--Chart-->
        <polyline fill="none" stroke="black" stroke-linecap="round" stroke-width="2" points="106.208955223881,114.686956521739 121.731343283582,114.686956521739 137.373134328358,114.686956521739 153.014925373134,114.686956521739 168.65671641791,114.686956521739 184.298507462687,114.686956521739 199.940298507463,114.686956521739 215.582089552239,114.686956521739 231.223880597015,114.686956521739 246.865671641791,114.686956521739 262.507462686567,114.686956521739 278.149253731343,114.686956521739 293.791044776119,114.686956521739 309.432835820896,114.686956521739 325.074626865672,114.686956521739 340.716417910448,114.686956521739 356.358208955224,114.686956521739 372,114.686956521739 387.641791044776,114.686956521739 403.283582089552,114.686956521739 418.925373134328,114.686956521739 434.567164179104,114.686956521739 450.208955223881,114.686956521739 465.850746268657,114.686956521739 481.492537313433,114.686956521739 497.134328358209,114.686956521739 512.656716417911,114.686956521739 528.298507462687,114.686956521739 543.940298507463,114.686956521739 559.582089552239,114.686956521739 575.223880597015,114.686956521739 590.865671641791,114.686956521739 606.507462686567,114.686956521739 622.149253731343,114.686956521739 637.791044776119,114.686956521739 653.432835820896,114.686956521739 669.074626865672,114.686956521739 684.716417910448,114.686956521739 700.358208955224,114.686956521739 716,114.686956521739 731.641791044776,114.686956521739 747.283582089552,114.686956521739 762.925373134328,114.686956521739 778.567164179104,147.4 794.208955223881,189.660869565217 809.850746268657,225.921739130435 825.492537313433,257.382608695652 841.134328358209,284.904347826087 856.776119402985,309.217391304348 894.029850746269,357.060869565217 "/>
    </g>
</svg>

这是我的.fo

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <fo:layout-master-set>
    <fo:simple-page-master
  margin-right="1.5cm"
  margin-left="1.5cm"
  margin-bottom="2cm"
  margin-top="1cm"
  page-width="21cm"
  page-height="29.7cm"
  master-name="first">
      <fo:region-body margin-top="1cm"/>
      <fo:region-before extent="1cm"/>
      <fo:region-after extent="1.5cm"/>
    </fo:simple-page-master>
  </fo:layout-master-set>

  <fo:page-sequence master-reference="first">
    <fo:static-content flow-name="xsl-region-before">
      <fo:block line-height="14pt" font-size="10pt"
    text-align="end">Embedding SVG examples</fo:block>
    </fo:static-content>
    <fo:static-content flow-name="xsl-region-after">
      <fo:block line-height="14pt" font-size="10pt"
    text-align="end">Page <fo:page-number/></fo:block>
    </fo:static-content>

    <fo:flow flow-name="xsl-region-body">

      <fo:block text-align="center" font-weight="bold" font-size="14pt" space-before.optimum="3pt" space-after.optimum="15pt">
      Embedding SVG
      </fo:block>

      <fo:block>
        <fo:external-graphic src="file:out.svg" width="100%" content-height="100%" content-width="scale-down-to-fit" scaling="uniform"/>
      </fo:block>
    </fo:flow>
  </fo:page-sequence>
</fo:root>

【问题讨论】:

    标签: pdf svg pdf-generation apache-fop


    【解决方案1】:

    我在文本元素上使用属性xy 而不是dxdy 解决了问题。

    【讨论】:

    • 这可能是 Apache Fop 的问题,在这种情况下,您应该将其报告给该库的问题跟踪器。
    猜你喜欢
    • 2017-10-14
    • 1970-01-01
    • 1970-01-01
    • 2014-05-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-16
    相关资源
    最近更新 更多