SVG 경로 크기 조정 및 mPdf를 사용하여 변환

Question

안녕하세요. SVG에 문제가 있습니다.

먼저 SVG를 HTML에 넣었습니다. 입력 유형 라디오를 사용하면 사용자가 이 SVG의 크기를 조정할 수 있습니다(백분율 값이 있는 너비 스타일 속성을 추가하여). 하지만 mpdf(JSON의 SVG)로 보내면 작동하지 않습니다.

그런 다음 PDF에서 크기를 계산하려고 하는데 이 SVG의 뷰박스/크기에 맞지 않습니다.

그래서 제가 얻은 SVG는 다음과 같습니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3. org/1999/xlink" id="svg-number" width="686.280029296875px" height="540.8900146484375px" viewBox="62.619998931884766 245 686.280029296875 540.8900146484375 " 스타일 ="너비: 28%; 높이: 자동;">< 경로 채우기="#ffffff" id="경로-svg-번호" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 271.73L277.95 252.69ZM748 .90 703.86L74 8.90 785.89L384.89 785.89L384.89 715.94L557.37 531.01Q594.73 488.16 610.47 458.68Q626.22 429.20 626.22 403.93L626 .22 403.93Q62 6.22 370.24 608.09 348.82Q589.97 327.39 556.64 327.39L556.64 327.39Q519 .65 327.39 500.43 352.48Q481.20 377.56 481.20 419.31L481.20 419.31L377.20 419.31L376.46 417.11Q374.63 344.97 423.89 294.98 Q473.14 245.00 556 .64 245.00L556.64 245.00Q639.04 245.00 686.10 287.84Q733.15 330.69 733.15 402.10L733.15 402.10Q733.15 450.44 706.60 491.27Q680.05 532.10 618.90 598.39L618.90 598.39L524.05 702.03L524.78 703.86L748 .90 703.86Z" gt;</path></svg>

PDF로 렌더링하고 싶지만 크기가 다릅니다.

function getPrintSize(container) {
    let renderSize = getElementSize(컨테이너);
    let scale = getScale(); //33과 같은 정수 값을 반환합니다.

    반품 {
        너비: (renderSize.width * 100) / scale, //예: (159 * 100) / 24.127 = 659.013
        높이: (renderSize.height * 100) / scale //예: (125 * 100) / 24.127 = 518.092
    }
}

그러면 새 SVG는 659.013px x 518.092px여야 하지만 새로운 올바른 크기를 설정할 수 없습니다(mPdf는 style="width: ..."를 지원하지 않습니다. 이론적으로는 부분적으로 이 태그를 지원합니다. 그러나 실제로는 지원하지 않습니다).

mPdf에서는 다음과 같이 렌더링하려고 합니다.

...
$template .= '<td align="center" style="너비: 1890px; 높이: 913px; 수직 정렬: 중간">'.$data->number.'</td>';
...

이 SVG를 경로별로 확장하는 방법을 아는 사람이 있나요?

Answer 1

내 경험에 따르면 mPdf 또는 DOmPDF와 같은 PDF 생성기는 상대 백분율 기반 값을 처리하는 데 어려움을 겪는 경향이 있습니다.

배율 계산이 예상대로 작동하는 한 svg의 너비 및 높이 속성을 직접 변경할 수 있습니다.

으아악 으아악 으아악

계산 가능한 값을 얻으려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.

으아악

또는

으아악

첫 번째 방법은 기본적으로 숫자를 반환하고 백분율 값을 절대값(svg 사용자 단위 기준)으로 변환합니다.

후자는 모든 단위를 제거하고 순수한 숫자 값을 반환합니다.