当前位置: 首页 > 知识库问答 >
问题:

为什么SVG图在生成的PDF中的行为与在浏览器中的不同?

储志业
2023-03-14

我想根据一些先前计算的数据生成一个图表。该图表应该在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>

共有1个答案

孙海
2023-03-14

我使用文本元素上的属性xy而不是 dy

 类似资料:
  • 问题内容: 我的项目过去还不错-文件空白,编辑器痕迹,问题视图和程序包浏览器树中的错误都显示为红色X标记。 虽然有点自发,但它停止正常工作。 如果我在代码中引入了错误,则该错误将显示在文件的空白处,并且没有其他地方。需要进行“项目清理”才能使红色X出现在其他地方。 然后,如果我解决了问题,该错误会从文件边缘清除,但红色标记会在其他位置持续存在,直到我再次进行清理为止。 为什么它不再自动正确显示错误

  • 本文向大家介绍浏览器中window.length的结果是什么?为什么?相关面试题,主要包含被问及浏览器中window.length的结果是什么?为什么?时的应答技巧和注意事项,需要的朋友参考一下 神奇的问题,神奇的答案

  • 问题内容: 我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等)。 问题答案: 通过JavaScript的方法如下: 使用canvg JavaScript库通过Canvas渲染SVG图像 根据以下说明,从Canvas捕获编码为JPG(或PNG)的数据URI:将[HTML Canvas捕获为gif / jpg / png / pdf? 使用IMG中的值,你可以将其写为新图像,如

  • 我正在做一个测试,Firefox如何编码字符。 但事实让我困惑。 超文本标记语言代码: xxx是一些汉字。这些字符必须编码成%xx等格式才能通过HTTP传输。 首先,我用UTF-8编码源文件。使用firefox打开html文件。img标签将发送一个请求,“xxx”字符由UTF8编码。 (用UTF8编码HTML源文件,字符集=UTF8,浏览器用UTF编码URL) 我把meta改成了

  • 编辑:这个被标记为重复的问题没有: 解释不存在cors问题的错误报告 让它在Postman中工作但在浏览器中不工作的情况。 我从邮递员那里生成了这个请求。 如果我把这个从邮递员那里寄出去,我会得到“token\u expired”,这正是我所期望的。 但是,当我以jQuery形式生成此代码并通过浏览器触发它时,如下所示,我得到一个CORS错误: 我正在使用http服务器和cors选项提供下面的代码

  • 问题内容: 我正在写一个基于AJAX / COMET的在线聊天室。我的设计是: 请求 -----------------等待------------------------->发送转储数据 -----------------等待------------------------->发送转储数据 -----------------等待------------------------->发送转储数据 -