我得到了这个带有两个简单SVG图像的简单HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么.
印刷前后：
亲自尝试一下：
stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">normal;fill:#808080;" y="383">
normal;fill:#808080;" y="175">
axis-labels highcharts-xaxis-labels">
normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1">
normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,5-1,9normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1">
normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,5-2,9normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="362" opacity="1">
normal;fill:#808080;width:77px;text-overflow:clip;" text-anchor="middle" transform="translate(0,5-4,0axis-labels highcharts-yaxis-labels">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="346" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="264" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="181" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="99" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1">
Nowrap;" transform="translate(0,-9000000000)">
stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1,1)">stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1,1)">stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1,1)">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">stroke="#DFDFDF" stroke-width="1" opacity="1">normal;fill:#808080;" y="382.94112549695427">Jahrenormal;fill:#808080;" y="166">Kostenaxis-labels highcharts-xaxis-labels">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 80.93363446243863 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 168.14490206807244 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 255.35616967370623 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 342.5674372793401 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 429.7787048849739 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 516.9899724906077 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 110.0040569976499 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 139.07447953286115 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 197.2153246032837 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 226.28574713849497 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 284.4265922089175 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 313.49701474412876 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 371.63785981455135 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 400.7082823497626 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 458.84912742018514 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 487.9195499553964 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="1">
normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 575.1308175610302 340)" y="340" opacity="1">
axis-labels highcharts-yaxis-labels">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="328" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="266" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="203" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="141" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="78" opacity="1">
normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="16" opacity="1">
Nowrap;" transform="translate(0,1)"> 最佳答案
小学,亲爱的沃森.
您的问题是在HTML文档中复制id的情况.目前你有2< clipPath id =“highcharts-1”>在你的svg中使用相同的id,我猜你会用某种工具生成2个图表. chipPaths后来用于剪切每个图表的内容：
由于此SVG中有2个具有相同id highcharts-1的clipPath,第二个clipPath会覆盖第一个,并且您的两个图表都将被第二个图表的内容区域剪裁.
因此,解决方案是更改clipPath的1的id,并在适当的highcharts系列中使用其新id.
对于无法在Chrome上重现错误的用户,请尝试缩小页面然后将其缩小.它强制浏览器再次渲染(在定义第二个clipPath之后)并模拟OP所具有的问题.
原文地址：https://www.jb51.cc/html/425569.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
