Chrome 从第二页开始打印包含使用Visio 2019/16创建的SVG文件的HTML页面时,连接器箭头消失/变形

xiozqbni  于 2023-02-17  发布在  Go
关注(0)|答案(1)|浏览(121)

重现步骤:
1.使用MS-Visio 2016/2019创建一个带有箭头连接器的SVG文件,该文件将插入带有标记的HTML页面

  1. HTML页面的内容(包含SVG)在浏览器本身(Chrome和Edge)中正确显示。
    1.但是,当在Chrome/Edge浏览器中打印同一个HTML页面时,只要SVG文件位于第二页和/或更多页上,箭头就会在打印中消失(扭曲)。只有Visio SVG文件位于HTML文件打印的第一页上,箭头才会正确打印。
    带有SVG的HTML文件的示例代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<object width="100%" height="100%" id="SVGViewer1" data="<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by Microsoft Visio, SVG Export svg_1.svg 1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="8.26772in" height="11.6929in" viewBox="0 0 595.276 841.89" xml:space="preserve" color-interpolation-filters="sRGB" class="st5">
    <title>9101im001</title>

    <style type="text/css">
    <![CDATA[
        .st1 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
        .st2 {fill:#000000;font-family:Verdana;font-size:0.666664em}
        .st3 {marker-end:url(#mrkr4-15);stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
        .st4 {fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:0.08695652173913}
        .st5 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
    ]]>
    </style>

    <defs id="Markers">
        <g id="lend4">
            <path d="M 2 1 L 0 0 L 2 -1 L 2 1 " style="stroke:none"/>
        </g>
        <marker id="mrkr4-15" class="st4" refX="-23" orient="auto" markerUnits="strokeWidth" overflow="visible">
            <use xlink:href="#lend4" transform="scale(-11.5,-11.5) "/>
        </marker>
    </defs>
    <g>
        <title>Page-1</title>
        <g id="shape16-1" transform="translate(127.559,-685.276)">
            <title>Process.16</title>
            <desc>ASSIGNED</desc>
            <rect x="0" y="799.37" width="85.0394" height="42.5197" class="st1"/>
            <text x="20.93" y="823.03" class="st2">ASSIGNED</text>      </g>
        <g id="shape39-4" transform="translate(127.559,-481.897)">
            <title>Process.39</title>
            <desc>PENDING REQUEST</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="3.21" y="830.12" class="st2">PENDING REQUEST</text>        </g>
        <g id="shape67-7" transform="translate(127.559,-765.354)">
            <title>Process.67</title>
            <desc>NEW</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="33.04" y="830.12" class="st2">NEW</text>       </g>
        <g id="shape94-10" transform="translate(162.992,-765.354)">
            <title>Dynamic connector.94</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape40-16" transform="translate(127.559,-553.465)">
            <title>Process.40</title>
            <desc>FIXED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="30.19" y="830.12" class="st2">FIXED</text>     </g>
        <g id="shape43-19" transform="translate(127.559,-368.511)">
            <title>Process.43</title>
            <desc>VERIFIED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="23.2" y="830.12" class="st2">VERIFIED</text>       </g>
        <g id="shape62-22" transform="translate(162.992,-553.465)">
            <title>Dynamic connector.62</title>
            <path d="M7.09 841.89 L7.09 879.59" class="st3"/>
        </g>
        <g id="shape63-27" transform="translate(162.992,-481.897)">
            <title>Dynamic connector.63</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape85-32" transform="translate(127.559,-425.204)">
            <title>Process.85</title>
            <desc>RETEST</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="27.02" y="830.12" class="st2">RETEST</text>        </g>
        <g id="shape112-35" transform="translate(127.559,-311.818)">
            <title>Process.112</title>
            <desc>CLOSED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="26.01" y="830.12" class="st2">CLOSED</text>        </g>
        <g id="shape33-38" transform="translate(162.992,-425.204)">
            <title>Dynamic connector</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape121-43" transform="translate(162.992,-368.511)">
            <title>Dynamic connector.121</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape122-48" transform="translate(14.1732,-425.204)">
            <title>Process.122</title>
            <desc>REOPENED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="20.52" y="830.12" class="st2">REOPENED</text>      </g>
        <g id="shape123-51" transform="translate(127.559,-619.37)">
            <title>Process.123</title>
            <desc>OPEN</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="31.44" y="830.12" class="st2">OPEN</text>      </g>
        <g id="shape124-54" transform="translate(291.458,-659.055)">
            <title>Process.124</title>
            <desc>REJECTED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="21.99" y="830.12" class="st2">REJECTED</text>      </g>
        <g id="shape125-57" transform="translate(291.458,-576.85)">
            <title>Process.125</title>
            <desc>DEFERRED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="20.91" y="830.12" class="st2">DEFERRED</text>      </g>
        <g id="shape126-60" transform="translate(162.992,-685.276)">
            <title>Dynamic connector.126</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape127-65" transform="translate(162.992,-619.37)">
            <title>Dynamic connector.127</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape129-70" transform="translate(127.559,-432.291)">
            <title>Dynamic connector.129</title>
            <path d="M0 834.8 L-22.83 834.8" class="st3"/>
        </g>
        <g id="shape131-75" transform="translate(14.1732,-439.377)">
            <title>Dynamic connector.131</title>
            <path d="M0 841.89 L-6.38 841.89 L-6.38 647.72 L107.87 647.72" class="st3"/>
        </g>
        <g id="shape132-80" transform="translate(212.598,-633.543)">
            <title>Dynamic connector.132</title>
            <path d="M0 841.89 L121.38 841.89 L121.38 821.9" class="st3"/>
        </g>
        <g id="shape133-85" transform="translate(326.891,-637.795)">
            <title>Dynamic connector.133</title>
            <path d="M7.09 841.89 L7.09 868.97" class="st3"/>
        </g>
    </g>
</svg> </object>
<object width="100%" height="100%" id="SVGViewer1" data="<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by Microsoft Visio, SVG Export svg_1.svg 1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="8.26772in" height="11.6929in" viewBox="0 0 595.276 841.89" xml:space="preserve" color-interpolation-filters="sRGB" class="st5">
    <title>9101im001</title>

    <style type="text/css">
    <![CDATA[
        .st1 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
        .st2 {fill:#000000;font-family:Verdana;font-size:0.666664em}
        .st3 {marker-end:url(#mrkr4-15);stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
        .st4 {fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:0.08695652173913}
        .st5 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
    ]]>
    </style>

    <defs id="Markers">
        <g id="lend4">
            <path d="M 2 1 L 0 0 L 2 -1 L 2 1 " style="stroke:none"/>
        </g>
        <marker id="mrkr4-15" class="st4" refX="-23" orient="auto" markerUnits="strokeWidth" overflow="visible">
            <use xlink:href="#lend4" transform="scale(-11.5,-11.5) "/>
        </marker>
    </defs>
    <g>
        <title>Page-1</title>
        <g id="shape16-1" transform="translate(127.559,-685.276)">
            <title>Process.16</title>
            <desc>ASSIGNED</desc>
            <rect x="0" y="799.37" width="85.0394" height="42.5197" class="st1"/>
            <text x="20.93" y="823.03" class="st2">ASSIGNED</text>      </g>
        <g id="shape39-4" transform="translate(127.559,-481.897)">
            <title>Process.39</title>
            <desc>PENDING REQUEST</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="3.21" y="830.12" class="st2">PENDING REQUEST</text>        </g>
        <g id="shape67-7" transform="translate(127.559,-765.354)">
            <title>Process.67</title>
            <desc>NEW</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="33.04" y="830.12" class="st2">NEW</text>       </g>
        <g id="shape94-10" transform="translate(162.992,-765.354)">
            <title>Dynamic connector.94</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape40-16" transform="translate(127.559,-553.465)">
            <title>Process.40</title>
            <desc>FIXED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="30.19" y="830.12" class="st2">FIXED</text>     </g>
        <g id="shape43-19" transform="translate(127.559,-368.511)">
            <title>Process.43</title>
            <desc>VERIFIED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="23.2" y="830.12" class="st2">VERIFIED</text>       </g>
        <g id="shape62-22" transform="translate(162.992,-553.465)">
            <title>Dynamic connector.62</title>
            <path d="M7.09 841.89 L7.09 879.59" class="st3"/>
        </g>
        <g id="shape63-27" transform="translate(162.992,-481.897)">
            <title>Dynamic connector.63</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape85-32" transform="translate(127.559,-425.204)">
            <title>Process.85</title>
            <desc>RETEST</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="27.02" y="830.12" class="st2">RETEST</text>        </g>
        <g id="shape112-35" transform="translate(127.559,-311.818)">
            <title>Process.112</title>
            <desc>CLOSED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="26.01" y="830.12" class="st2">CLOSED</text>        </g>
        <g id="shape33-38" transform="translate(162.992,-425.204)">
            <title>Dynamic connector</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape121-43" transform="translate(162.992,-368.511)">
            <title>Dynamic connector.121</title>
            <path d="M7.09 841.89 L7.09 864.72" class="st3"/>
        </g>
        <g id="shape122-48" transform="translate(14.1732,-425.204)">
            <title>Process.122</title>
            <desc>REOPENED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="20.52" y="830.12" class="st2">REOPENED</text>      </g>
        <g id="shape123-51" transform="translate(127.559,-619.37)">
            <title>Process.123</title>
            <desc>OPEN</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="31.44" y="830.12" class="st2">OPEN</text>      </g>
        <g id="shape124-54" transform="translate(291.458,-659.055)">
            <title>Process.124</title>
            <desc>REJECTED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="21.99" y="830.12" class="st2">REJECTED</text>      </g>
        <g id="shape125-57" transform="translate(291.458,-576.85)">
            <title>Process.125</title>
            <desc>DEFERRED</desc>
            <rect x="0" y="813.543" width="85.0394" height="28.3465" class="st1"/>
            <text x="20.91" y="830.12" class="st2">DEFERRED</text>      </g>
        <g id="shape126-60" transform="translate(162.992,-685.276)">
            <title>Dynamic connector.126</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape127-65" transform="translate(162.992,-619.37)">
            <title>Dynamic connector.127</title>
            <path d="M7.09 841.89 L7.09 873.93" class="st3"/>
        </g>
        <g id="shape129-70" transform="translate(127.559,-432.291)">
            <title>Dynamic connector.129</title>
            <path d="M0 834.8 L-22.83 834.8" class="st3"/>
        </g>
        <g id="shape131-75" transform="translate(14.1732,-439.377)">
            <title>Dynamic connector.131</title>
            <path d="M0 841.89 L-6.38 841.89 L-6.38 647.72 L107.87 647.72" class="st3"/>
        </g>
        <g id="shape132-80" transform="translate(212.598,-633.543)">
            <title>Dynamic connector.132</title>
            <path d="M0 841.89 L121.38 841.89 L121.38 821.9" class="st3"/>
        </g>
        <g id="shape133-85" transform="translate(326.891,-637.795)">
            <title>Dynamic connector.133</title>
            <path d="M7.09 841.89 L7.09 868.97" class="st3"/>
        </g>
    </g>
</svg> </object>
</body>
</html>

您可以看到下面示例代码的打印输出:
https://imgur.com/a/ACLCELT
此错误行为仅适用于使用Visio创建的SVG文件,而不适用于使用类似图表软件(例如drawio-https://app.diagrams.net)创建的SVG文件。
正在寻找解决此问题的建议。
谢谢!

fiei3ece

fiei3ece1#

我已经在Chromium浏览器(Chrome、Edge和Opera)上成功地重现了这个问题,但是Firefox正确地显示了标记。看起来像是一个与Chromium浏览器上的“打印到PDF”相关的新问题。我建议Chromium开发团队使用reporting this issue

相关问题