html – SVG图像互相操纵

前端之家收集整理的这篇文章主要介绍了html – SVG图像互相操纵前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

印刷前后:

Before and after printing

亲自尝试一下:

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所具有的问题.

原文链接:https://www.f2er.com/html/425569.html

猜你在找的HTML相关文章