<p>Hallo, ich habe Probleme mit SVG. </p> <p>Zuerst füge ich die SVG-Datei in HTML ein. Mit dem Eingabetyp „Radio“ kann der Benutzer diese SVG-Datei skalieren (indem er ein Breitenstilattribut mit einem Prozentwert hinzufügt). Aber wenn ich es an mpdf (SVGs in JSON) sende, funktioniert es nicht. </p> <p>Dann versuche ich, die Größe der PDF-Datei zu berechnen, aber ich kann die Ansichtsbox/Größe dieser SVG-Datei nicht anpassen. </p> <p>Also das SVG, das ich bekomme, ist wie folgt: </p> <pre class="brush:html;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3. org/1999/xlink" id="svg-number" width="686.280029296875px" height="540.8900146484375px" viewBox="62.619998931884766 245 686.280029296875 540.8900146484375 " Stil ="Breite: 28 %; Höhe: automatisch;">< path fill="#ffffff" id="path-svg-number" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 271.73L277.95 252.69ZM748 .90.703.86L7 48,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.93Q6 26,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 6,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" ></path></svg> </pre> <p>Ich möchte es als PDF rendern, aber mit anderen Abmessungen. </p> <pre class="brush:js;toolbar:false;">function getPrintSize(container) { let renderSize = getElementSize(container); let scale = getScale(); //Gibt einen ganzzahligen Wert zurück, z. B. 33 zurückkehren { width: (renderSize.width * 100) / scale, //Zum Beispiel (159 * 100) / 24.127 = 659.013 height: (renderSize.height * 100) / scale //Zum Beispiel (125 * 100) / 24.127 = 518.092 } } </pre> <p>Dann sollte das neue SVG 659,013 Pixel x 518,092 Pixel groß sein, aber ich kann die neuen korrekten Abmessungen nicht festlegen (mPdf unterstützt style="width: ..." nicht). Theoretisch wird dieses Tag teilweise unterstützt. aber in der Praxis wird es nicht unterstützt). </p> <p>In mPDF versuche ich es so darzustellen: </p> <pre class="brush:php;toolbar:false;">... $template .= '<td align="center" style="width: 1890px; height: 913px; Vertical-align: middle">'.$data->number.'</td>'; ... </pre> <p>Hat jemand eine Idee, wie man dieses SVG nach Pfad skalieren kann? </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'));