使用mPdf縮放SVG路徑並轉換
Joseph Gordon-Levitt
Joseph Gordon-Levitt 2023-08-16 17:57:54
0
1
526

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

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

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

所以我得到的SVG如下:

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

我想在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 .= ''.$data->number.''; … 

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

Joseph Gordon-Levitt
Joseph Gordon-Levitt

全部回覆 (1)
P粉536909186

根據我的經驗,像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; }
  

為了得到可計算的值,你可以使用以下兩種方法之一:

let width = svg.width.baseVal.value;

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

第一種方法預設傳回一個數字,並將百分比值轉換為絕對值(基於svg使用者單位)。

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

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!