85

私は公式文書からsvgを学んでいますが、そのような行があります。わかりません。すでにwidthandheight属性がある場合、 で再度指定する意味は何viewBox="0 0 1500 1000"ですか? 公式ドキュメントでは「1 px 単位は 1 ユーザー単位に等しいと定義されています。したがって、「5 px」の長さは「5」の長さと同じです」と記載されているため、この viewBox は幅 1500 px で、 300px と 200px を超える高さ 1000 のビュー。では、なぜ最初に幅と高さの値を定義するのでしょうか? 

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">
4

7 に答える 7

94

幅と高さは、その大きさ<svg>です。viewBox はそのコンテンツの表示方法を制御するため、viewBox="0 0 1500 1000" は<svg>要素のコンテンツを 5 倍 (1500 / 300 = 5 および 1000 / 200 = 5) 縮小し、コンテンツは 1/ になります。 5 viewBox がない場合のサイズですが、<svg>

弾力性のある表面があり、それを 4 等分にカットしたとします。3 ピースを捨てると、元のサーフェスの 1/4 のサイズのサーフェスが得られます。サーフェスを引き伸ばして元のサーフェスと同じサイズにすると、サーフェス上のすべてのサイズが 2 倍になります。これが、viewBox と width/height の関係です。

于 2013-03-11T10:31:41.147 に答える
5

主要：

  • viewBox 属性は、SVGのビューポートという用語と密接に関連しています。

略語：

  • ビューボックス - VB
  • ビューポート - VP
  • ビューポート座標系 - VCS
  • ローカル座標系 - LCS

構文：

<svg x = "VP_min_X" y = "VP_min_Y" width = "VP_width" height = "VP_height"
viewBox = "VB_min_X VB_min_Y VB_width VB_height">

デフォルト値:

  • 単位 = ピクセル
  • ビューポート幅 = 300
  • ビューポート幅 = 150
  • viewBox = ビューポート

デフォルト値を持つコード

<svg>

同じ結果のコード:

<svg x = "0" y = "0" width = "300" height = "150" viewBox = "0 0 300 150">

ビューポート設定:
ビューポート座標系 (VCS) の原点:

  • VP_min_X
  • VP_min_Y

最も外側のビューポートの場合、これらの値は重要ではなく、いずれの場合も 0 に等しいため、通常は省略されます。

<svg width = "100" height = "150">

同じ結果のコード: (最も外側のビューポートの場合):

<svg x = "10" y = 20 "width ="100 "height ="150">

ネストされたビューポート:
ネストされたビューポート (VP_min_X、VP_min_Y) で、VCS の原点からのインデントを定義します。

<svg width="100%" height="100%"> <!-- external viewport = full browser size -->
     <svg x="50" y="100" width="200" height="300" viewBox="0 0 100 100">
     </svg>
</svg>

この場合、ネストされたビューポートのインデント:
外部 VCS の原点から X 軸に沿って 50 ピクセル、Y 軸に沿って 100 ピクセル。

SVG グラフィックスが描画される長方形領域 (ビューポート) の寸法が決定されます。

  • VP_幅
  • VP_高さ

ビューボックスの設定:
ローカル座標系 (LCS) の原点:

  • Vb_min_X
  • Vb_min_y

SVG 画像の可視部分のサイズ:

  • Vb_width
  • Vb_高さ

RENDERING:
最終的な SVG イメージを構築するとき、座標系は COMBINING によって変換され
ます: 座標系の原点:

  • VCS (VP_min_X、VP_min_Y)
  • LCS (VB_min_X、VB_min_Y)

可視画像領域の終点:

  • VCS (VP_幅、VP_高さ)
  • LCS (VB_幅、VB_高さ)

機能:
その結果、以下を制御できるようになります。

  • ブラウザ ウィンドウ内のビューポートの位置 [ネストされたビューポートを使用して (VP_min_X, VP_min_Y) を変更]
  • ビューポート サイズ (VP_width、VP_height)
  • 画像の可視部分をパン [viewBox を使用して (VB_min_X, VB_min_Y) を変更]
  • 画像の表示部分のスケーリング [viewBox を使用して (VB_width, VB_height) を変更]

視覚化: 上記の原則を理解するために YouTube で 2 分間: SVGの
ビデオ viewBox

ドキュメント:
W3C 2019 SVG 2 仕様

于 2019-12-14T18:37:10.483 に答える