SVG パスをスケールし、mPdf を使用して変換する
<p>こんにちは、SVG で問題が発生しました。 </p>
<p>まず、入力タイプ ラジオを使用して SVG を HTML に配置します。ユーザーはこの SVG を(パーセンテージ値を持つ幅スタイル属性を追加することで)拡大縮小できます。しかし、それを mpdf (JSON の SVG) に送信すると、機能しません。 </p>
<p>次に、PDF のサイズを計算しようとしますが、この SVG のビューボックス/サイズに合わせることができません。 </p>
<p>つまり、取得した SVG は次のとおりです。 </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" 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">
</pre>
<p>PDF でレンダリングしたいのですが、寸法が異なります。 </p>
<pre class="brush:js;toolbar:false;">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
}
}
</pre>
<p>新しい SVG は 659.013px x 518.092px になるはずですが、新しい正しい寸法を設定できません (mPdf は style="width: ..." をサポートしていません。理論的にはこのタグを部分的にサポートしています。ただし、実際にはサポートされていません)。 </p>
<p>mPdf では、次のようにレンダリングしてみます。 </p>
<pre class="brush:php;toolbar:false;">...
$template .= '<td align="center" style="width: 1890px; height: 913px;vertical-align: middle">'.$data->number.'</td>';
...
</pre>
<p>この SVG をパスによって拡大縮小する方法を知っている人はいますか? </p>