html – SVG图像互相操纵

发布时间：2020-12-14 22:38:31 所属栏目：资源来源：网络整理

导读：我得到了这个带有两个简单SVG图像的简单HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么. 印刷前后：亲自尝试一下：最佳答案小学,亲爱的沃森. 您的问题是在HTML文档中复制id的情况.目前你有

我得到了这个带有两个简单SVG图像的简单HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么.

印刷前后：

Before and after printing

亲自尝试一下：


最佳答案
小学,亲爱的沃森.
您的问题是在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所具有的问题.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!