1

50mm x 25mm の印刷サイズに固定された基本的な SVG ファイルがあります (したがって、CorelDraw で開くと、ドキュメント サイズはこれになります)。

<svg 
    width=50mm
    height=25mm
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
>
    <g>
        <text
            x=0
            y=55
            font-family="Verdana"
            font-size=55
            fill="black"
        >NOS?</text>
        <line
            class='v_pos'
            stroke="green"  
            x1=0 
            y1=55 
            x2=500
            y2=55
            stroke-width="1"  
        />
    </g>
</svg>

ブラウザで 500x250 ピクセルのサイズを実現するにはどうすればよいですか? 比率は変わりませんが、Web ブラウザーでも固定のキャンバス サイズが必要です。

問題を言い換え/拡張する必要があります：

グラフィック (ブラウザで作成) を CorelDraw にエクスポートしたいと考えています。CorelDraw は SVG ファイルを読み取ることができるからです。ブラウザーのキャンバスは、たとえば 500x250px で、すべてのオブジェクトは最初にピクセル単位で測定されます。エクスポート後、キャンバス(50x25mm まで) から開始し、その後にオブジェクトが続きます。

これを設定する必要があります

質問は次のとおりです。

  • ウィッチ属性は、CorelDraw のキャンバスの幅と高さを担当しますか?
  • オブジェクトを含むサイズを変更する簡単な方法 (preserveAspectRatio、viewBox、スタイル メディア) はありますか、またはすべてのオブジェクトの幅、高さ、x、y などの属性を 1 つずつ変換する必要がありますか?

アドバイスありがとうございます！

4

2 に答える 2

2

SVG 画像には 2 つの異なるサイズの側面があります: 無限のキャンバスからどのくらい見たいか、そして結果の画像はどのくらいの大きさであるべきかです。最初のものは、左上隅のx座標とy座標、幅と高さviewBoxを含むによって定義されます。2 つ目は、属性またはスタイル プロパティを使用して定義されます。widthheight

したがって、属性を使用して、長方形viewBoxの内側の領域に関心があることを示します。これはブラウザに表示されるものだからです。(0px, 0px)(500px, 250px)viewBox="0 0 500 250"

50mm次に、画像を広くて高く表示したいので、25mmそれに応じて幅と高さを設定します。ルート svg 要素の属性として設定することもできます。つまり、エクスポート時にのみ設定する必要があります。そうしないと、ブラウザにも適用されるためです。メディアstyleに対してのみ有効な要素を使用して設定することもできます。 print.

viewBoxデフォルトでは、viewBox で定義された領域はピクセルごとに表示されるため、ブラウザで を定義する場合、幅と高さを明示的に指定する必要はありません。

于 2012-08-28T16:48:07.443 に答える
0

異なるメディアを扱う場合は、スタイルシートメディア セレクターを使用します。そして SVG は、要素のmedia属性を使用して、それをネイティブにサポートしています。<style>基本的な構文は次のとおりです。

<style media="something" type="text/css">
  svg:root {
    width: 50mm;
    height: 25mm; 
  }
</style>

やりたいことに応じて、次のことができます。

  1. media="print"印刷メディアのサイズを指定するために使用し、ルート<svg>要素に設定された属性で指定されたデフォルトの幅と高さを他のすべての場合に使用できるようにします
  2. 画面media="screen"を使用して表示する場合に、ブラウザー専用のターゲットの幅と高さを指定するために使用します。ここで、画面は次のように定義されます。「主にカラー コンピューター画面を対象としています」。
于 2012-08-27T22:15:29.720 に答える