Как исправить свой путь SVG, который отрезал бумагой во время диалогового окна печати? ⇐ CSS

[Anonymous]

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

Я думал, что ограничивающая коробка не было полностью расчета, поэтому я пробовал запрос на печать>, кроме как напечатана Удача. < /p>
Ниже приведен минимальный пример. Я дал комментарии к изменениям кода, я попробовал. < /P>

Код: Выделить всё

function applyCardBorders() {
let oldCardBorders = document.getElementsByClassName('card-border');
Array.from(oldCardBorders).forEach(cardBorder => cardBorder.remove());

let maxCornerRadius = 12;
let cards = document.getElementsByClassName('card');

Array.from(cards).forEach(card => {
drawBorder(card, maxCornerRadius);
});
}

function drawBorder(card, maxCornerRadius) {
// tried it this way too
// let w = card.offsetWidth;
// let h = card.offsetHeight;
let w = card.getBoundingClientRect().width;
let h = card.getBoundingClientRect().height;
let cornerRadius = Math.min(h / 3, maxCornerRadius);

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.style.position = "absolute";
svg.style.left = "0px";
svg.style.top = "0px";
svg.style.pointerEvents = "none";
svg.classList.add('card-border');
// tried it this way too
// svg.setAttribute("width", "100%");
// svg.setAttribute("height", "100%");
svg.setAttribute("width", w);
svg.setAttribute("height", h);

const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", `M ${w-cornerRadius},${1} \
A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${w-1},${cornerRadius} \
L ${w-1},${h-cornerRadius} \
A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${w-cornerRadius},${h-1} \
L ${cornerRadius},${h-1} \
A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${1},${h-cornerRadius} \
L ${1},${cornerRadius} \
A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${cornerRadius},${1} \
Z`);
path.setAttribute("stroke", "#666461");
path.setAttribute("stroke-width", "2");
path.setAttribute("fill", "none");

svg.appendChild(path);
card.appendChild(svg);
}

window.addEventListener('load', async () => {
requestAnimationFrame(() => {
applyCardBorders();
});
});

window.addEventListener('resize', () => {
applyCardBorders();
});

// tried it this way too
// const mediaQueryList = window.matchMedia("print");
// mediaQueryList.addEventListener("change", (mql) => {
//  requestAnimationFrame(() => {
//      applyCardBorders();
//  });
// });
window.addEventListener("beforeprint", () => {
applyCardBorders();
});
window.addEventListener("afterprint", () => {
applyCardBorders();
});< /code>
.card {
/* don't want to do this because it is paper size dependent, but it works */
/* max-width: 6in; */
background-color: #b7cece;
padding: 8px;
position: relative;
}< /code>

lorem ipsum
lorem ipsum

Подробнее здесь: https://stackoverflow.com/questions/797 ... int-dialog