Угловые графические элементы при печати

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; - это проблема. Согласно w3 это означает:

скрыто: переполнение обрезается, а остальная часть содержимого будет невидимой

visible: переполнение не ограничено. Он рендерит за пределами поля элемента. Это по умолчанию

Попытки исправить

Надеюсь, добавление 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? Решит ли это мою проблему?