Skala laluan SVG dan tukar menggunakan mPdf

Question

Helo, saya menghadapi masalah dengan SVG.

Mula-mula, saya meletakkan SVG ke dalam HTML, dengan radio jenis input, pengguna boleh menskalakan SVG ini (dengan menambahkan atribut gaya lebar dengan nilai peratusan). Tetapi apabila saya menghantarnya ke mpdf (SVG dalam JSON) ia tidak berfungsi.

Kemudian saya cuba mengira saiz pada pdf, tetapi saya tidak dapat memuatkan kotak pandangan/saiz SVG ini.

Jadi SVG yang saya dapat adalah seperti berikut:

Saya mahu memaparkannya pada pdf tetapi dengan dimensi yang berbeza. 
fungsi getPrintSize(bekas) {
    biarkan renderSize = getElementSize(bekas);
    let scale = getScale(); //Kembalikan nilai integer, seperti 33

    kembali {
        lebar: (renderSize.width * 100) / skala, //Sebagai contoh (159 * 100) / 24.127 = 659.013
        ketinggian: (renderSize.height * 100) / skala //Contohnya (125 * 100) / 24.127 = 518.092
    }
}

Kemudian SVG baharu hendaklah 659.013px x 518.092px, tetapi saya tidak boleh menetapkan dimensi baharu yang betul (mPdf tidak menyokong style="width: ...". Secara teorinya ia menyokong sebahagian teg ini, tetapi dalam praktiknya ia tidak menyokong). 
Dalam mPdf, saya cuba memaparkannya seperti ini: 
...
$template .= ''.$data->number.'';
...

Adakah sesiapa mempunyai sebarang idea bagaimana untuk menskalakan SVG ini mengikut laluan? 
            

Answer 1

Menurut pengalaman saya, penjana pdf seperti mPdf atau DOmPDF cenderung menghadapi kesukaran mengendalikan nilai berasaskan peratusan relatif.

Selagi pengiraan penskalaan anda berfungsi seperti yang diharapkan, anda boleh terus menukar sifat lebar dan ketinggian svg:

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;
}

<svg xmlns="http://www.w3.org/2000/svg" id="svg-number" width="686.280029296875px" height="540.8900146484375px" viewBox="62.619998931884766 245 686.280029296875 540.8900146484375" >
  <path id="path-svg-number" d="m277.9 252.7 0 533.2-106.9 0 0-438.7-108.4 0 0-75.5 215.3-19zm471 451.2 0 82-364 0 0-70 172.5-184.9q37.3-42.8 53.1-72.3 15.7-29.5 15.7-54.8l0 0q0-33.7-18.1-55.1-18.1-21.4-51.5-21.4l0 0q-37 0-56.2 25.1-19.2 25.1-19.2 66.8l0 0-104 0-.7-2.2q-1.9-72.1 47.4-122.1 49.2-50 132.7-50l0 0q82.4 0 129.5 42.8 47 42.9 47 114.3l0 0q0 48.3-26.5 89.2-26.6 40.8-87.7 107.1l0 0-94.9 103.6.8 1.9 224.1 0z" />
</svg>

Untuk mendapatkan nilai yang boleh dikira, anda boleh menggunakan salah satu daripada dua kaedah berikut:

let width = svg.width.baseVal.value;

atau

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

Kaedah pertama mengembalikan nombor secara lalai dan menukar nilai peratusan kepada nilai mutlak (berdasarkan unit pengguna svg).

Yang terakhir akan menanggalkan semua unit dan mengembalikan nilai angka tulen.