SVG-Pfad skalieren und mit mPDF konvertieren

Question

Hallo, ich habe Probleme mit SVG.

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.

Dann versuche ich, die Größe der PDF-Datei zu berechnen, aber ich kann die Ansichtsbox/Größe dieser SVG-Datei nicht anpassen.

Also das SVG, das ich bekomme, ist wie folgt:

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

Ich möchte es als PDF rendern, aber mit anderen Abmessungen.

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

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).

In mPDF versuche ich es so darzustellen:

...
$template .= '<td align="center" style="width: 1890px; height: 913px; Vertical-align: middle">'.$data->number.'</td>';
...

Hat jemand eine Idee, wie man dieses SVG nach Pfad skalieren kann?

Answer 1

根据我的经验，像mPdf或DOmPDF这样的pdf生成器往往难以处理相对的、基于百分比的值。

只要你的缩放计算按预期工作，你可以直接更改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>

为了获得可计算的值，你可以使用以下两种方法之一：

let width = svg.width.baseVal.value;

或者

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

第一种方法默认返回一个数字，并将百分比值转换为绝对值（基于svg用户单位）。

后者将剥离所有单位并返回纯数字值。