<p>Bonjour, j'ai des problèmes avec SVG. </p> <p>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. </p> <p>Ensuite, j'essaie de calculer la taille sur le pdf, mais je n'arrive pas à adapter la zone d'affichage/taille de ce SVG. </p> <p>Le SVG que j'obtiens est donc le suivant : </p> <pre class="brush:html;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3. " ="largeur : 28 % ; hauteur : auto;">< chemin fill="#ffffff" id="chemin-svg-numéro" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 271.73L277.95 252.69ZM748 .90 8h90 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.93Q62 6,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.98 Q473.14 245.00 .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 gt;</chemin></svg> ≪/pré> <p>Je souhaite le rendre en pdf mais avec des dimensions différentes. </p> <pre class="brush:js;toolbar:false;">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é> <p>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). </p> <p>Dans mPdf, j'essaie de le rendre comme ceci : </p> <pre class="brush:php;toolbar:false;">... $template .= '<td align="center" style="largeur : 1890px; hauteur : 913px; alignement vertical : milieu">'.$data->number.'</td>'; ... ≪/pré> <p> Quelqu'un a-t-il une idée sur la manière de mettre à l'échelle ce SVG par chemin ? </p>

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>

let width = svg.width.baseVal.value;

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