Scale SVG with path and pass to mPdf - Hack The Tech - Latest News related to Computer and Technology

Hack The Tech - Latest News related to Computer and Technology

Get Daily Latest News related to Computer and Technology and hack the world.

Wednesday, August 16, 2023

Scale SVG with path and pass to mPdf

Hello I've got problem with SVG.

First I put SVG into HTML and by input type radio, user can scale this SVG (add style attribute with width in % values). But when I send this to mpdf (SVGs in JSON) it does not work.

Then I try to calculate size on pdf but I can't fit viewbox/size of this SVG.

So I've got SVG like this:

<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" style="width: 28%; height: auto;"><path fill="#ffffff" id="path-svg-number" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 347.17L62.62 271.73L277.95 252.69ZM748.90 703.86L748.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.93Q626.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.98Q473.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"></path></svg>

And I want to render it on pdf but with different size.

function getPrintSize(container) {
    let renderSize = getElementSize(container);
    let scale = getScale(); //retrun int value ex. 33

    return {
        width: (renderSize.width * 100) / scale, //ex. (159 * 100) / 24.127 = 659.013
        height: (renderSize.height * 100) / scale //ex. (125 * 100) / 24.127 = 518.092
    }
}

Then new SVG should has 659.013px x 518.092px but I can't set new correct dimensions (mPdf does not support style="width: ...". Theoretically it support partialy this tag, but in practise not).

In mPdf I try to render it like this:

...
$template .= '<td align="center" style="width: 1890px; height: 913px; vertical-align: middle">'.$data->number.'</td>';
...

Have anyone got any idea how can I scale this SVG with path?



source https://stackoverflow.com/questions/76908323/scale-svg-with-path-and-pass-to-mpdf

No comments:

Post a Comment