简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

SVG (Scalable Vector Graphics) ビューボックス属性 viewbox およびpreserveAspectRatio

黄舟
リリース： 2017-02-27 15:08:30
オリジナル
2141 人が閲覧しました


幅と高さの 2 つの基本的な幅と高さの設定属性
に加えて、SVG にはさらに 2 つの高度な属性もあります
viewbox とpreserveAspectRatio

SVG viewbox

viewbox は svg タグの属性です
以下の例を参照してください

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー
rreee

SVG 上に非常に小さな赤い四角形を描きました
次に、ビューボックス属性を追加しましょう

rect {    fill: red;}
ログイン後にコピー
ログイン後にコピー

この時点で、
先ほどは非常にコンパクトだったグラフィック
が非常に大きくなっていることがわかりました。
ここがviewboxのすごいところ
viewbox="0 0 30 30"
0 0は原点(左上)の座標を指定します
そして30 30はsvgの幅と高さを指定します
svgの座標系をカスタマイズするのと同じです
Master Zhang Xinxuこれに対する答えがあります。より鮮明な説明:

SVG はモニター画面のようなもので、viewBox はスクリーンショット ツールによって選択されたフレームです。
最後のプレゼンテーションは、フレーム内にあるスクリーンショットの内容を再度モニターに全画面表示します！

(幅と高さを指定せずにビューボックスのみを指定した場合、SVG は画面全体を占めます)

ビューボックスとビューポート

上記の SVG の幅と高さは 300×300 なので、30 にスケールしました。 × 30
それを理解するのは簡単です
しかし、比例して拡大縮小されなかった場合、どのように動作するでしょうか?

「フルスクリーンモード」の画像は以下ビューポートと呼ばれます(幅と高さのみ指定)
「スクリーンショットモード」の画像はビューボックスと呼ばれます(幅、高さ、ビューボックスが指定されます)

<svg width=300 height=300 viewbox="0 0 30 30">
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

2つのモードを書きます以下は良い比較になります
これはページ上でどのように表示されるかです

私が追加した緑色のボックスは、ビューポートにキャプチャされたビューボックスの位置を表します
拡大
その位置を調整したい場合
にはpreserveAspectRatio属性の使用が必要です

preserveAspectRatio

preserveAspectRatio属性値は2つの部分で構成されます

最初の部分:

ビューポートとビューボックス Y軸の中心揃えビューポートとビューボックスの下揃えここにxとY は組み合わせて使用​​されますx は小文字、Y は大文字であることにも注意してください属性値意味
属性値の意味
xMinビューポートとビューボックス 左揃え
xMidビューポートとビューボックス YMid
YMax
パート 2:



meet

viewBox をビューに合わせて拡大縮小するポート

スライスなしビューポートに完全にフィットするようにアスペクト比を歪めます
ビューポートを埋めるために小さい比率の方向にズームしながらアスペクト比を維持します

这个属性值得默认值大概就是 preserveAspectRatio="xMidYMid meet"
我们可以尝试调整这些值来了解这些属性值得含义

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

第二个属性值
meet类比于css中background-size的属性值contain
slice类比于css中background-size的属性值cover
CSS3背景相关属性

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

这里我把x设置为xMin否则就看不到小红方块了

显示的结果就是我vieport中用紫色框标记的部分

==主页传送门==

SVG除了width和height这两个基本的宽高设置属性
还有两个更高级的属性
viewbox与preserveAspectRatio

SVG视区盒

viewbox是svg标签上的属性
看下面的例子

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー
rect {    fill: red;}
ログイン後にコピー
ログイン後にコピー

在svg上我们画了一个非常小的红色矩形
现在我们来添加一个viewbox属性

<svg width=300 height=300 viewbox="0 0 30 30">
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是viewbox的奇妙之处
viewbox="0 0 30 30"
0 0 指定了原点的坐标（左上）
而30 30指定了svg的宽高
相当于我们自定义了svg的坐标系统
张鑫旭大神对此有一个比较形象的解释：

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，
最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！

（如果只指定viewbox不指定width和height，那么svg就会占满整个屏幕）

viewbox与viewport

由于我们上面svg的宽高为300×300，被我们等比缩放为了30×30
所以很容易想明白
可是如果不是等比的缩放它又是怎样的行为呢？

下面把“全屏模式”的图片称为viewport（只指定width、height）
而“截屏模式”的图片称为viewbox（指定width、height、viewbox）

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー

下面我把两种模式写在一块这样可以很好的对比
页面中是这样显示的

绿色的框是我添加的表示viewport中截取的viewbox位置
我们发现被放大后它处于居中的位置
如果我们想要调整它的位置
就需要来使用preserveAspectRatio属性了

preserveAspectRatio

preserveAspectRatio属性值由两部分组成

第一部分：

属性值含义
xMinviewport和viewBox 左边对齐
xMidviewport和viewBox x轴中心对齐
xMaxviewport和viewBox 右边对齐
YMinviewport和viewBox 上边对齐
YMidviewport和viewBox y轴中心对齐
YMaxviewport和viewBox 下边对齐


这里x和Y是组合使用的
同时还要注意x是小写，Y是大写

第二部分：

属性值含义
meet保持纵横比缩放viewBox适应viewport
slice保持纵横比同时比例小的方向放大填满viewport
none扭曲纵横比以充分适应viewport

这个属性值得默认值大概就是 preserveAspectRatio="xMidYMid meet"
我们可以尝试调整这些值来了解这些属性值得含义

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

第二个属性值
meet类比于css中background-size的属性值contain
slice类比于css中background-size的属性值cover
CSS3背景相关属性

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>
ログイン後にコピー
ログイン後にコピー

这里我把x设置为xMin否则就看不到小红方块了

显示的结果就是我vieport中用紫色框标记的部分

 以上就是SVG（可缩放矢量图形）视区盒属性viewbox与preserveAspectRatio的内容，更多相关内容请关注PHP中文网（www.php.cn）！


関連ラベル：
SVG，viewbox，preserveAspectRatio
ソース：php.cn
前の記事：SVG (Scalable Vector Graphics) の基本的なグラフィック描画方法とパス コマンド 次の記事：SVG (Scalable Vector Graphics) 描画ツール Method Draw
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1807
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1952
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1658
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1559
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1590
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！