Mettre à l'échelle le chemin SVG et convertir à l'aide de mPdf

Question

Bonjour, j'ai des problèmes avec SVG.

Tout d'abord, j'ai mis le SVG en HTML, avec le type d'entrée radio, l'utilisateur peut mettre à l'échelle ce SVG (en ajoutant un attribut de style de largeur avec une valeur en pourcentage). Mais quand je l'envoie en mpdf (SVG en JSON), ça ne marche pas.

Ensuite, j'essaie de calculer la taille sur le pdf, mais je n'arrive pas à adapter la zone d'affichage/taille de ce SVG.

Le SVG que j'obtiens est donc le suivant :

≪/pré>
Je souhaite le rendre en pdf mais avec des dimensions différentes. 
fonction getPrintSize(conteneur) {
    laissez renderSize = getElementSize (conteneur);
    let scale = getScale(); //Renvoie une valeur entière, telle que 33

    retour {
        width: (renderSize.width * 100) / scale, //Par exemple (159 * 100) / 24,127 = 659,013
        hauteur : (renderSize.height * 100) / échelle //Par exemple (125 * 100) / 24,127 = 518,092
    }
}
≪/pré>
Alors le nouveau SVG devrait être de 659,013px x 518,092px, mais je ne peux pas définir les nouvelles dimensions correctes (mPdf ne prend pas en charge style="width: ...". En théorie, il prend en charge partiellement cette balise, mais en pratique ça ne supporte pas). 
Dans mPdf, j'essaie de le rendre comme ceci : 
...
$template .= ''.$data->number.'';
...
≪/pré>
 Quelqu'un a-t-il une idée sur la manière de mettre à l'échelle ce SVG par chemin ? 
            

Answer 1

D'après mon expérience, les générateurs de PDF comme mPdf ou DOmPDF ont tendance à avoir des difficultés à gérer les valeurs relatives basées sur des pourcentages.

Tant que vos calculs de mise à l'échelle fonctionnent comme prévu, vous pouvez directement modifier les propriétés de largeur et de hauteur du 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>

Pour obtenir une valeur calculable, vous pouvez utiliser l'une des deux méthodes suivantes :

let width = svg.width.baseVal.value;

ou

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

La première méthode renvoie un nombre par défaut et convertit la valeur en pourcentage en valeur absolue (basée sur les unités utilisateur SVG).

Ce dernier supprimera toutes les unités et renverra une valeur purement numérique.