Установите пользовательский размер страницы в диалоговом окне предварительного просмотра Chrome для печати

Question

Я собираюсь быть настолько ясным, насколько это возможно.У меня есть svg-код (внутри div), который состоит из изображения и текста.Мне нужно, чтобы svg-код имел специальные ширину и высоту;в частности, мне нужно, чтобы они были 190 х 250 мм.Я уже установил это, назначив ширину 925 пикселей (так как я использую онлайн-конвертер от мм до пикселей) и 700 пикселей на высоту.

Проблема в том, что когда я открываю файл в Chrome и приступаю к печати (Cmd + P), откроется диалоговое окно печати, и оно показывает мне, что мой дизайн будет напечатан на странице A4.У меня есть нестандартная бумага (в реальной жизни, физически), размеры которой были предварительно прокомментированы, поэтому мне нужно, чтобы при открытии диалогового окна печати (cmd + p) появлялась бумага размером 190x250 мм (а не A4, которая "добавляет"это пустое место)

У меня есть Mac, и после открытия диалогового окна печати я могу щелкнуть что-то вроде" показать больше параметров ", а затем установить нужный размер бумаги.Тем не менее, когда я печатаю с этим, мой дизайн не покрывает 100% бумаги.

То, что я уже пробовал, с помощью библиотеки jspdf, конвертировать мой SVG в PDF с точными размерами, которые яхочу.Это работает, только если в svg используются общие шрифты (arial, Times New Roman и т. Д.), Но нет, если я использую специальные шрифты.

Я действительно, очень ценю некоторую помощь здесь.Большое спасибо, и извините за мой английский.Надеюсь, вы понимаете !

Это мой svg дизайн - упрощенный

Это то, что происходит (и что я не хочу

РЕДАКТИРОВАТЬ: Это то, что я хочу, чтобы иметь возможность печати (обратите внимание, как предварительный просмотр печати "подходит" для нестандартного размера бумаги). (Изображение, конечно, редактируется)

Что мне нужно

Answer 1

Мне нужно было добавить отрицательное поле на @ страницу, чтобы убрать белую рамку.Но принтеры могут решить, что они хотят этого запаса.

*{
  margin:0;
  padding:0;
}
svg{max-width:100vh;}

@media print{
  @page{
    margin:-1em;
    padding:0;
    width:100%;
  }
  svg {
       margin:0;
       width:100%;
    }
}

<svg viewBox = "0 0 100 60">
  <rect width="100" height="100" fill="pink" />
  <text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>