김쨈창고

viewBox 본문

마크업

viewBox

류쨩 2017. 7. 21. 18:32

viewBox란?

viewBox는 svg요소가 가지는 svg의 요소가 svg요소의 viewport의 경계범위까지 확장 또는 축소, 위치지정 및 분할을 할 수 있게 해주는 속성입니다.
viewBox는 4개의 값을 가지게 되는데, 이는 다음과 같습니다.

viewBox = "<min-x>, <min-y>, <width>, <height>"

<min-x>, <min-y>는 svg요소 내에서 viewBox의 좌표를 정의하고 <width>, <height>는 svg요소가 가지는 영역에 맞춰 svg의 요소를 확대할 지, 축소할 지를 정의합니다.
<min-x>, <min-y>는 왼쪽 최상단을 기준으로 합니다. 여기서 정해진 기준으로 viewbox가 그려지게 됩니다. <width>, <height>는 음수를 적용할 수 없으며, 0일 경우(둘 중 하나의 값이 0이여도) svg의 요소는 화면에 노출되지 않습니다.

[viewbox기본 예제]

viewBox는 preserveAspectRatio 값에 따라 svg의 요소의 늘림 또는 비율유지를 지정할 수 있습니다.
초기 값은 preserveAspectRatio="xMidYMid meet" 입니다.
preserveAspectRatio값이 meet나 slice일 경우, 균일한 스케일링을 강제 적용합니다.

[viewbox preserveAspectRatio 예제]

1. viewBox의 비율계산

viewBox는 아래와 같은 계산을 통해 나온 비율을 svg의 요소에 적용합니다. 비율이 소수점으로 나올 경우에는 반올림되며, 좀 더 자세한 내용은 아래 3.을 참고합니다.
svgWidth/viewBoxWidth, svgHeight/viewBoxHeight
viewbox에 단위를 넣게 될 경우 svg의 요소는 자신이 가진 기본값으로 노출되며 이는 viewBox가 선언되지 않을 경우와 동일합니다.
viewbox는 단위가 있는 것이 아닌, 벡터 공간을 가리킴에 유의해야합니다. viewport값 없이 viewbox만 존재할 경우, svg요소는 브라우저 전체를 viewport값으로 가지게 됩니다. 

 

 

2. viewBox를 선언할 수 있는 element

3. Computing the equivalent transform of an SVG viewport

  1. vb-x, vb-y, vb-width, vb-height는 viewBox속성의 min-x, min-y, width, height을 지칭합니다.
  2. e-x, e-y, e-width, e-height는 svg요소의 위치와 크기를 지칭합니다.
  3. align은 preserveAspectRatio의 정렬값을 지칭하며, preserveAspectRatio 값이 정의되지 않은 경우, xMidYMid값을 갖습니다.
  4. meet, slice는 preserveAspectRatio의 meet와 slice값을 지칭하며 preserveAspectRatio 값이 정의되지 않은 경우 또는 meet,slice값이 누락된 경우 meet값을 갖습니다.
  5. scale-x는 svg요소넓이(e-width) / viewBox넓이(vb-width) 입니다.
  6. scale-y는 svg요소높이(e-height) / viewBox높이(vb-height) 입니다.
  7. 만약 preserveAspectRatio값(align)이 none이 아닌 meet 또는 slice 중 meet을 갖게되면, scale-x와 scale-y를 더 작은 것으로 설정합니다.
  8. 만약 preserveAspectRatio값(align)이 none이 아닌 meet 또는 slice 중 slice를 갖게되면 scale-x와 scale-y를 더 큰 것으로 설정합니다.
  9. translate-x는 e-x - (vb-x * scale-x) 입니다.
  10. translate-y는 e-y - (vb-y * scale-y) 입니다.
  11. 만약에 preserveAspectRatio값(align)이 xMid이면 (e-width - vb-width * scale-x) / 2를 추가합니다.
  12. 만약에 preserveAspectRatio값(align)이 xMax이면 (e-width - vb-width * scale-x) 를 추가합니다.
  13. 만약에 preserveAspectRatio값(align)이 yMid이면 (e-height - vb-height * scale-y) / 2 를 추가합니다.
  14. 만약에 preserveAspectRatio값(align)이 yMax이면 (e-height - vb-height * scale-y) 를 추가합니다.

참고URL

 

minX, minY가 왜 우리가 아는 좌표 정의랑 다르지?
: min-x, min-y는 viewbox의 상단 좌측 코너 즉, viewbox의 시작 지점을 의미하는데요. viewbox의 좌표가 시작되는 최소의 값이라는 의미를 갖지 않을까 싶은데.. 딱히 자세한 설명을 못 찾겠네요.

preserveAspectRatio XMidYMid 대소문자 구별하나요?
: 네 구분합니다.

하위 요소의 viewbox가 적용 안되는 것은 브라우저마다 다른건 아닐까?
: 하위요소 viewbox가 적용이 안되는 것은 현재까지 나온 내용 중에선 image입니다. view는 어떻게 쓰는 것인지 잘 모르겠어서 일단 패스;; image에 viewbox가 적용이 안되는 것은 모든 브라우저에서 발생하는 현상이며, firefox에서는 image요소 자체를 지원하지 않는지.. 노출이 안되네요

'마크업' 카테고리의 다른 글

viewBox  (1) 2017.07.21
1 Comments
댓글쓰기 폼