打印时裁剪的角度绘图元素

Question

在打印HTML文档时，我在分页符处裁剪图时遇到了问题。我该如何防止剧透的SVG剪切？

---

设置

我有一个Angular6应用，我在其中使用angular-plotly.js

我通过以下方式安装它：

npm install angular-plotly.js plotly.js

按以下角度导入：

import { PlotlyModule } from 'angular-plotly.js';

使用以下代码将其呈现为HTML：

<plotly-plot 
 [data]="graph.data"
 [layout]="graph.layout">
</plotly-plot>

并使用以下文字将其打印在打字稿中：

 window.print();

---

研究

当我检查绘制的svg元素时，我看到

.js-plotly-plot .plotly .main-svg {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}
.js-plotly-plot .plotly svg {
    overflow: hidden;
}

我认为overflow: hidden;是问题所在。根据{{​​3}}，这意味着：

  

隐藏：溢出被裁剪，其余内容将不可见

     

可见：溢出不会被裁剪。它在元素框的外部渲染。这是默认设置

修复尝试

希望将overflow:visible添加到CSS将解决此问题。我已经尝试过：

<plotly-plot 
 [data]="graph.data"
 [layout]="graph.layout"
 [style]="{overflow:visible}">
</plotly-plot>

我还尝试添加属性：[className]="dontclip"，然后将其放在CSS中：

.dontclip {
  overflow:visible !important;
}

这两种尝试似乎都不会对检查的页面产生任何影响。

---

结论

如何强制SVG元素为overflow:visible？那能解决我的问题吗？