Hello, I'm having trouble with SVG.
First, I put the SVG into HTML, with input type radio, the user can scale this SVG (by adding a width style attribute with a percentage value). But when I send it to mpdf (SVGs in JSON) it doesn't work.
Then I try to calculate the size on the pdf, but I can't fit the viewbox/size of this SVG.
So the SVG I get is as follows:
I want to render it on pdf but with different dimensions.
function getPrintSize(container) { let renderSize = getElementSize(container); let scale = getScale(); //Return an integer value, such as 33 return { width: (renderSize.width * 100) / scale, //For example (159 * 100) / 24.127 = 659.013 height: (renderSize.height * 100) / scale //For example (125 * 100) / 24.127 = 518.092 } }
Then the new SVG should be 659.013px x 518.092px, but I can't set the new correct dimensions (mPdf doesn't support style="width: ...". In theory it partially supports this tag, but in practice it doesn't support).
In mPdf, I try to render it like this:
... $template .= ''.$data->number.' '; ...
Does anyone have any ideas how to scale this SVG by path?
In my experience, pdf generators like mPdf or DOmPDF tend to have difficulty handling relative, percentage-based values.
As long as your scaling calculations work as expected, you can directly change the svg's width and height properties:
To obtain a computable value, you can use one of the following two methods:
or
The first method returns a number by default and converts the percentage value to an absolute value (based on svg user units).
The latter will strip off all units and return a purely numeric value.