svg viewBox 속성

svg viewBox 속성

---

나는 공식 문서에서 svg를 배우고 있는데, 그런 줄이 있습니다. 나는 그것을 얻지 못한다. 이미 widthand height속성 이 있다면 그것을 다시 지정하는 요점은 무엇 viewBox="0 0 1500 1000"입니까? "1px 단위는 하나의 사용자 단위와 동일하게 정의됩니다. 따라서"5px "의 길이는 공식 문서에서"5 "의 길이와 동일하므로이 viewBox는 너비가 1500px이고 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">

---

너비와 높이는 얼마나 큽니다 <svg>. viewBox는 내용이 표시되는 방식을 제어하므로 viewBox = "0 0 1500 1000"은 <svg>요소 의 내용 을 5 배 (1500/300 = 5 및 1000/200 = 5) 로 축소하고 내용은 1 / 5 viewBox가 없으면 크기가<svg>

탄성 표면이 있고 4 등분으로 자른다 고 상상해보십시오. 세 조각을 버리면 원래 표면 크기의 1/4 인 표면이 있습니다. 이제 표면을 늘이고 원래 표면과 동일한 크기로 만들면 표면의 모든 크기가 두 배가됩니다. 이것이 viewBox와 너비 / 높이가 관련되는 방식입니다.

---

뷰 박스를 지정하지 않으면 요소의 모든 단위없는 숫자는 픽셀로 간주됩니다. (그리고 SVG는 cm과 같은 단위를 픽셀로 변환하기 위해 90dpi 또는 인치당 픽셀을 가정합니다.)

뷰 박스를 사용하면 요소의 단위가없는 숫자가 "사용자 단위"를 의미하고 해당 단위가 크기에 매핑되는 방식을 지정할 수 있습니다. 단순화를 위해 x 좌표, 즉 눈금자 만 고려하십시오. 뷰 박스는 눈금자가 svg의 200 픽셀 크기 너비와 일치하는 1500 단위를 가질 것이라고 말합니다.

0에서 1500까지의 선 요소 (단위 없음, 즉 사용자 단위)는 그려 질 때 즉, svg 그림의 너비에 걸쳐 200 픽셀이 늘어납니다.

(SVG는 해상도 손실없이 확장 가능하기 때문에 사용자가 확대하거나 축소 할 때 픽셀은 실제 세계에서 그다지 의미가 없습니다.)

일종의 좌표 변환입니다.

나는 당신이 "SVG Essentials"와 같은 책에서 배우는 것을 제안한다. 약 10 달러가 사용되었고, 내가이 대답을 느슨하게 인용했다.

---

기본적으로

<svg width="300" height="200">

svg 그리드의 "눈금자"는 픽셀 단위입니다 (해당 svg의 모든 모양은 픽셀 단위로 측정 됨).

그러나 자신의 단위를 사용하려면 viewBox 속성을 사용할 수 있습니다.

<svg width="300" height="200" viewBox="0 0 1500 1000">

그것의 의미는:

가로축 : 1500 (너비 단위) = 300px => 1 (너비 단위) = 300 / 1500px = 1 / 5px

세로 축 : 1000 (신장 단위) = 200px => 1 (신장 단위) = 200 / 1000px = 1 / 5px

• 이제 svg의 모든 모양이 확장됩니다.

너비는 원점과 비교하여 1 / 5px (1/5 <1 => 축소)로 조정됩니다.

높이도 원점과 비교하여 1 / 5px (1/5 <1 => 축소)로 조정됩니다.

참조 URL : https://stackoverflow.com/questions/15335926/svg-viewbox-attribute