0

SVGテーブルから画像を生成できるコードがありHTMLます。JSFiddle リンク。

generated には問題がありimageます。画像をズームインしたように、すべての要素がぼやけています。

ptを使用してフォント サイズを変更しようとしましたemがpx、表の幅と高さを変更しようとしましたが、結果は同じでした。

HTML tableで1:1を見たいですSVG。ここで何が問題なのですか？

4

1 に答える 1

1

このコードには 2 つの問題があります。

1 つ目は、必要に応じてキャンバスを動的にスケーリングしていることです。キャンバスをスケーリングすると、キャンバスの 2dcontext 領域のピクセルもスケーリングされ、html や svg のようにスケーリングされません。ピクセルで構成された画像のようにスケーリングします。これがボケの原因です。

2 番目の問題は、最初の問題によって隠されていました。作成している svg ドキュメントは、それ自体を自動サイズ調整する方法を知らないため、svg 要素の幅と高さを 100% に設定しても何も起こりません。だから、私の推薦：

  1. jQuery でその場でキャンバス タグを作成し、幅と高さの属性をテーブルのボーダー ボックスの幅に設定して作成します。前にキャンバス要素のサイズを変更したコード内の場所でこれを行います。最も簡単な方法は、canvas 要素を div に置き換えることです。

    <div id="canvasy"></div>

    次に、キャンバス要素を次のように動的に追加します。

    $('#canvasy').append('<canvas id="canvas" width="'+($(id).width()+5)+'" height="'+($(id).height()+5)+'"></canvas>');

  2. svg を作成するときは、svg 要素で同じ幅/高さの値を使用します。

ここにあなたのフィドルの作業バージョンがあります

于 2012-12-20T22:06:13.650 に答える