9

「297mm」と「210mm」の幅と高さで定義された SVG 要素があり、viewbox はありません。これを行うのは、A4 ビューポート内で作業したいのですが、要素をピクセル単位で作成したいからです。

ある時点で、ピクセル単位で定義されたオブジェクトを拡大して、A4 ページの一部に収まるようにする必要があります。たとえば、幅 100 ピクセルのオブジェクトを水平方向に 30 mm に拡大したいとします。

これは可能ですか？新しい座標系を備えた 2 つ目のコンテナーが必要だと思いますが、これを行う方法が見つかりません。

編集

私 (または SVG) は、ピクセルとは何かを誤解しているようです。getBBox線のサイズを 100% に設定し、必要なスケーリングを見つけるためにピクセル サイズを取得できることに気付きました。このコードを書き、2 つのクライアントで実行しました。

function getDotsPerInch() {
   var hgroup, vgroup, hdpi, vdpi;

   hgroup = svgDocument.createElementNS(svgNS, "g");
   vgroup = svgDocument.createElementNS(svgNS, "g");
   svgRoot.appendChild(hgroup);
   svgRoot.appendChild(vgroup);

   drawLine(hgroup, 0, 100, "100%", 100, "#202020", 1, 1);
   drawLine(vgroup, 100, 0, 100, "100%", "#202020", 1, 1);

   hdpi = hgroup.getBBox().width  * 25.4 / WIDTH;
   vdpi = vgroup.getBBox().height * 25.4 / HEIGHT;

   drawText(hgroup, "DPI, horizontal: " + hdpi.toFixed(2), 100, 100);
   drawText(hgroup, "DPI, vertical:   " + vdpi.toFixed(2), 100, 120);
}

IE9、FF、Opera、および Chrome はすべて、両方のモニターが水平方向および垂直方向に96 dpi であることに同意しており (Opera は少し不正確ですが)、Safari は両方のモニターで 0 dpi を報告します。そのため、svg は「ピクセル」を「96dpi」と定義しているように見えます。いくつかの簡単なグーグルはこれを確認するように見えますが、決定的なものは何も見つかりませんでした。ほとんどのヒットは 90dpi で、FF バリアントは 96dpi です。

4

1 に答える 1

0

要素をネスト<svg>し、子要素のviewBox属性を使用して、新しい座標系を取得できます。<svg>親の座標系で親に表示する場所の子要素x、y、width、height属性を指定します。

于 2012-05-16T13:01:13.000 に答える