使用mPdf縮放SVG路徑並轉換

Question

你好，我在SVG方面遇到了問題。

首先，我將SVG放入HTML中，透過輸入類型為radio的方式，使用者可以縮放此SVG（透過新增具有百分比值的寬度樣式屬性）。但是當我將其發送給mpdf（SVGs在JSON中）時，它不起作用。

然後我嘗試在pdf上計算大小，但我無法適應此SVG的viewbox/size。

所以我得到的SVG如下：

<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 5px" viewBox="62.619998931884766 25868. 84375" style="width: 28%; height: auto;">< path fill="#ffffff" id="path-svg-number" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 347.17257.1727257257. 8.90 703.86L748.90 785.89L384.89 785.89L384.89 715.94L557.37 531.01Q594.73 488.16 610.47 531.01Q594.73 488.16 610.47 458.68Q. 22 403.93Q626.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.389417.38941376.46 417.Q389417.389417.389417.3257417.329417.389417.3893. 473.14 245.00 556.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.397583.39574.757.90 524.3957. 90 703.86Z"></path></svg>

我想在pdf上渲染它，但尺寸不同。

function getPrintSize(container) {
    let renderSize = getElementSize(container);
    let scale = getScale(); //傳回整數值，例如33

    return {
        width: (renderSize.width * 100) / scale, //例如 (159 * 100) / 24.127 = 659.013
        height: (renderSize.height * 100) / scale //例如 (125 * 100) / 24.127 = 518.092
    }
}

然後新的SVG應該是659.013px x 518.092px，但我無法設定新的正確尺寸（mPdf不支援style="width: ..."。理論上它部分支持此標籤，但實際上不支持）。

在mPdf中，我嘗試這樣渲染它：

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

有人有任何想法如何透過路徑縮放此SVG嗎？

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使用者單位）。

後者將剝離所有單位並傳回純數字值。