SVG(Scalable Vector Graphics) 뷰박스 속성 viewbox 및 PreserveAspectRatio

viewbox는 svg 태그의 속성입니다
아래 예를 보세요

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

rrree

svg에 아주 작은 빨간색 직사각형을 그렸습니다

이제 뷰박스 속성을 추가해 보겠습니다

rect {    fill: red;}

이때아주 컴팩트했던 그래픽이

이제 너무 커졌습니다

이것이 viewbox의 놀라운 점입니다

0 0은 원점(왼쪽 위)의 좌표를 지정합니다그리고 30 30은 svg의 너비와 높이를 지정합니다

. svg 사용자 정의 좌표계

Master Zhang Xinxu는 이에 대해 보다 생생한 설명을 제공합니다.


SVG는 모니터 화면과 같고 viewBox는 스크린샷 도구에서 선택한 프레임입니다.
최종 프레젠테이션은 프레임 안의 스크린샷 내용을 다시 모니터에 전체 화면으로 표시하는 것입니다! viewbox="0 0 30 30"

(너비와 높이를 지정하지 않고 viewbox만 지정하면 svg가 전체 화면을 차지합니다.)

viewbox 및 viewport

너비로 인해 위의 svg 높이는 300×300이고 30×30으로 크기를 조정했습니다

그래서 이해하기 쉽습니다
. 하지만 비례적으로 크기가 조정되지 않으면 어떻게 동작할까요?

아래에서는 "전체 화면 모드"의 사진을 viewport(너비와 높이만 지정)라고 합니다.

그리고 "스크린샷 모드"의 사진을 viewbox(너비, 높이, 뷰박스 지정)라고 합니다.

<svg width=300 height=300 viewbox="0 0 30 30">
    <rect x=10 y=10 width=10 height=10></rect></svg>

아래에는 두 가지 모드를 잘 비교할 수 있도록 함께 적어보겠습니다

페이지에 이렇게 표시됩니다

녹색 box는 제가 추가한 뷰포트입니다 가로채는 뷰박스 위치
확대 후 중앙 위치에 있음을 확인했습니다

위치를 조정하려면

PreserveAspectRatio 속성을 사용해야 합니다

preserveAspectRatio

preserveAspectRatio 속성 값은 두 부분으로 구성됩니다.

첫 번째 부분:

여기서 x와 Y는 조합하여 사용됩니다

x는 소문자이고 Y는 대문자입니다.

두 번째 부분:

---

这个属性值得默认值大概就是 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属性值由两部分组成

第一部分：

属性值	含义
xMin	viewport和viewBox 左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox 右边对齐
YMin	viewport和viewBox 上边对齐
YMid	viewport和viewBox y轴中心对齐
YMax	viewport和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）！