我得到了这个带有两个简单SVG图像的简单HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么.
印刷前后：
亲自尝试一下：
502.5 10 L 502.5 340 589.5 340 589.5 10">50258189" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="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所具有的问题.
