SVG パスをスケールし、mPdf を使用して変換する

Question

こんにちは、SVG で問題が発生しました。

まず、入力タイプ ラジオを使用して SVG を HTML に配置します。ユーザーはこの SVG を（パーセンテージ値を持つ幅スタイル属性を追加することで）拡大縮小できます。しかし、それを mpdf (JSON の SVG) に送信すると、機能しません。

次に、PDF のサイズを計算しようとしますが、この SVG のビューボックス/サイズに合わせることができません。

つまり、取得した 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 245 686.280029296875 540.8900146484375" style="width : 28%; 高さ: 自動;"><< path fill="#ffffff" id="path-svg-number" d="M277.95 252.69L277.95 785.89L171.02 785.89L171.02 347.17L62.62 347.17L62.62 271.73L277.95 252.69ZM748.9 0 703.86L748.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.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.11Q374.63 344.97 423.89 294.98Q 473.14 245.00 556.64 245.00L556.64 245.00Q639.04 245.00 686.10 287.84Q733.15 330.69 733.15 402.10 L733.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">

PDF でレンダリングしたいのですが、寸法が異なります。

function getPrintSize(container) {
    renderSize = getElementSize(container);
    letscale = getScale(); // 33 などの整数値を返します

    戻る {
        width: (renderSize.width * 100) /scale, //例: (159 * 100) / 24.127 = 659.013
        高さ: (renderSize.height * 100) / スケール //例: (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 の幅と高さのプロパティを直接変更できます。

リーリー リーリー リーリー

計算可能な値を取得するには、次の 2 つの方法のいずれかを使用できます。

リーリー ＃＃＃または＃＃＃ リーリー

最初のメソッドはデフォルトで数値を返し、パーセント値を絶対値 (SVG ユーザー単位に基づく) に変換します。

後者はすべての単位を取り除き、純粋な数値を返します。