Scale SVG path and convert using mPdf
P粉287726308
P粉287726308 2023-08-16 17:57:54
0
1
486

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:

< 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.98Q 473.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"> 

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?

P粉287726308
P粉287726308

reply all (1)
P粉536909186

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:

let svg = document.getElementById('svg-number') scaleSVG(svg, 0.05); function scaleSVG(svg, scale=1){ let width = svg.width.baseVal.value; let height = svg.height.baseVal.value; /** * alternative let width = parseFloat(svg.getAttribute('width')); let height = parseFloat(svg.getAttribute('height')); */ svg.setAttribute('width', width*scale) svg.setAttribute('height', height*scale) }
svg{ border: 1px solid red; }
  

To obtain a computable value, you can use one of the following two methods:

let width = svg.width.baseVal.value;

or

let width = parseFloat(svg.getAttribute('width'));

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.

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!