<SVG>
<rect x = "10"y = "10"stroke = "black"fill = "Transparent"Stroke-width = "5"/>
<rect x = "60"y = "10"rx = "10"ry = "10"stroke = "black"fill = "Transparent"Stroke-width = "5"/>
<circle cx = "25"cy = "75"r = "20"stroke = "Red"fill = "Transparent"Stroke-width = "5"/>
<Ellipse cx = "75"cy = "75"rx = "20"ry = "5"stroke = "Red"fill = "Transparent"Stroke-width = "5"/>
<line x1 = "10"x2 = "50"y1 = "110"y2 = "150"stroke = "Orange"Fill = "Transparent"Stroke-width = "5"/>
<Polyline Points = "60 110 65 120 70 115 75 130 80125 85 140 90 135 95 150 100 145"
스트로크 = "오렌지"fill = "투명한"스트로크 윈드 = "5"/>
<다각형 포인트 = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
스트로크 = "녹색"fill = "투명한"스트로크 윈드 = "5"/>
<경로 d = "m20,230 Q40,205 50,230"fill = "none"stroke = "blue"stroke-width = "5"/>
</svg>
이 HTML에 표시된 결과는 다음과 같습니다.
이 예제는 정상적인 사각형, 둥근 사각형, 원, 타원, 직선, 다각형 및 경로와 같은 많은 모양을 그립니다. 이것들은 모두 기본적인 그래픽 요소입니다. RECK 또는 PATH를 사용하여 RECK를 구현할 수있는 그래프를 그리는 방법에는 여러 가지가 있지만 SVG의 내용을 짧고 간결하며 읽기 쉽게 유지하려고 노력해야 합니다.
아래는 각 모양을 사용하기위한 지침입니다 (그림의 모양과 위치를 제어하는 기본 특성 만 있으며 충전과 같은 속성은 나중에 요약됩니다).
사각형 - 직장 요소 이 요소는 위치와 모양을 제어하는 6 개의 특성을 가지고 있습니다.X : 사각형의 왼쪽 상단 모서리의 좌표 (사용자 좌표계)의 x 값.
Y : 사각형의 왼쪽 상단 모서리의 좌표 (사용자 좌표 시스템)의 y 값.
너비 : 사각형 너비.
높이 : 사각형 높이.
RX : 둥근 코너 효과가 달성되면 X 축을 따라 둥근 모서리의 반경이 있습니다.
RY : 둥근 코너 효과를 달성 할 때 y 축을 따라 둥근 모서리의 반경.
예를 들어, 위의 예에서는 둥근 코너 효과가 달성되며 RX 및 RY를 다른 값으로 설정하여 타원 코너 효과를 달성 할 수도 있습니다.
원 - 원 요소 이 요소의 속성은 주로 중심과 반경을 정의하는 것이 간단합니다.R : 원의 반경.
CX : 중앙 좌표의 x- 값.
Cy : 원의 중심 좌표의 y 값.
타원 - 타원 요소 이것은보다 일반적인 원형 요소입니다. 반대 축의 길이를 제어하여 각각 다른 타원을 달성 할 수 있습니다. 두 반 축이 동일 할 때 완벽한 원이라고 생각하기 쉽습니다.RX : 반대축 축 (x 반경).
Ry : 반-단축 축 (y-radius).
CX : 중앙 좌표의 x- 값.
Cy : 원의 중심 좌표의 y 값.
라인 - 라인 요소 직선은 시작점과 종말점을 정의해야합니다.X1 : 시작점 X 좌표.
Y1 : 출발점 Y 좌표.
X2 : 엔드 포인트 X 좌표.
Y2 : 엔드 포인트 Y 좌표.
폴리 라인 - 폴리 라인 요소 폴리 라인은 주로 각 라인 세그먼트의 종점을 정의해야하므로 한 점의 세트 만 매개 변수로 필요합니다.포인트 : 공백, 쉼표, 신생 등으로 분리 된 일련의 점은 각 지점에는 x 값과 y 값이 2 숫자가 있어야합니다. 따라서 다음 3 점 (0,0), (1,1) 및 (2,2)는 다음과 같이 쓸 수 있습니다. 0 0, 1 1, 2 2.
다각형 - 다각형 요소 이 요소는 폴리 라인 요소보다 한 단계 더 단계를 수행하고 마지막 지점을 연결하고 첫 번째 포인트를 연결하여 닫힌 그림을 형성하는 것입니다. 매개 변수는 동일합니다.포인트 : 공백, 쉼표, 신생 등으로 분리 된 일련의 점은 각 지점에는 x 값과 y 값이 2 숫자가 있어야합니다. 따라서 다음 3 점 (0,0), (1,1) 및 (2,2)는 다음과 같이 쓸 수 있습니다. 0 0, 1 1, 2 2.
경로 - 경로 요소 이것은 가장 일반적이고 강력한 요소입니다. 이 요소를 사용하면 위의 기본 모양뿐만 아니라 Bezier 곡선과 같은 복잡한 모양도 구현할 수 있습니다. 또한 경로를 사용하면 원활한 전환 세그먼트를 얻을 수 있습니다. 폴리 라인을 사용 하여이 효과를 달성하기 위해 사용될 수 있지만, 제공되어야하는 많은 점이 있으며, 확대 된 경우 효과가 좋지 않습니다. 이 요소는 하나의 매개 변수만으로 위치와 모양을 제어합니다.D : 일련의 드로잉 지침 및 드로잉 매개 변수 (점).
그리기 지침은 절대 좌표 지침과 상대 좌표 지침의 두 가지 유형으로 나뉩니다. 이 두 지시 사항에 사용 된 문자는 동일합니다. 즉, 상단과 소문자는 다릅니다. 절대 지침은 대문자를 사용하며 좌표는 절대 좌표입니다. 상대 지시 사항은 해당 소문자를 사용하고 점의 좌표는 오프셋을 나타냅니다.
절대 좌표 그리기 명령어 이 명령 세트의 매개 변수는 절대 좌표를 나타냅니다. 현재 브러시가 (x0, y0)에 있다고 가정하면 다음 절대 좌표 명령은 다음과 같이 의미를 나타냅니다.| 지침 | 매개 변수 | 설명 |
| 중 | xy | 브러시를 포인트로 이동하십시오 (x, y) |
| 엘 | xy | 브러시는 현재 지점에서 지점으로 선 세그먼트를 그립니다 (x, y) |
| 시간 | 엑스 | 브러시는 현재 지점에서 포인트 (X, Y0)까지 수평선 세그먼트를 그립니다. |
| 다섯 | 와이 | 브러시는 현재 지점에서 포인트 (x0, y)까지 수직선 세그먼트를 그립니다. |
| 에이 | RX RY X-AXIS-ROTATION 대형 ARC-FLAG SWEEP-FLAG XY | 브러시는 현재 지점에서 지점으로 아크를 그립니다 (x, y) |
| 기음 | X1 Y1, X2 Y2, XY | 브러시는 현재 지점에서 포인트 (x, y)까지 입방 베 지어 곡선을 그립니다. |
| 에스 | X2 Y2, XY | Cubic Bezier 곡선의 특수 버전 (첫 번째 제어 지점은 생략 됨) |
| 큐 | X1 Y1, XY | 2 차 베 지어 곡선을 뽑아 (x, y) |
| 티 | xy | 2 차 Bezier 곡선의 특수 버전 (제어점 생략) |
| 지 | 매개 변수가 없습니다 | 닫힌 그림을 그려 D 속성이 z 명령을 지정하지 않으면 동봉 그림 대신 선 세그먼트를 그립니다. |
브러시 명령 m을 이동하고 line 명령을 그립니다. l, h, v 및 명령 z는 모두 비교적 간단합니다. 다음은 곡선을 그리는 데 대한 몇 가지 지침에 중점을 둡니다. 아크 드로잉 명령어 : rx ry x- 축 방화 대형 아크 플래그 스윕 플래그 XY
2 점을 아크와 연결하는 것이 더 복잡하고 많은 상황이 있으므로이 명령에는 곡선의 각 속성을 제어하는 7 개의 매개 변수가 있습니다. 다음은 수치 값의 의미를 설명합니다.
RX, Ry
x 축-회전은 x 축 과이 아크가 위치한 수평 방향, 즉 x 축의 시계 반대 방향 회전 각도 사이의 각도이며, 음수는 회전 각도를 시계 방향으로 나타냅니다.
큰 arc-flag는 큰 각도 아크를 나타내는 1이고 작은 각도 아크를 나타 내기 위해 1입니다.
스윕 플래그는 1이며, 이는 시작점에서 중앙 주위의 엔드 포인트까지의 아크를 나타내고 0은 반 시계 방향을 나타냅니다.
x, y는 아크 터미널 좌표입니다.
처음 두 매개 변수와 마지막 두 매개 변수에 대해서는 이야기하지 않으므로 매우 간단합니다. 중간에있는 세 가지 매개 변수에 대해 이야기 해 봅시다.
x 축-회전은 회전 각도를 나타내며 다음 예에서는 아크 차이를 경험합니다.
<SVG>
<경로 d = "M10 315
L 110 215
A 30 50 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10 "Stroke ="Black "Fill ="Green "Stroke-width ="2 "Fill-Apacity ="0.5 "/>
</svg>
위의 HTML은 다음 그림을 그립니다.
그림에서, 우리는 다른 타원 회전 매개 변수가 그려진 아크의 다른 방향으로 이어진다는 것을 알 수 있습니다. 물론이 매개 변수는 완벽한 원에 영향을 미치지 않습니다.
대형 아크 플래그 및 스윕 플래그는 아크의 크기와 방향을 제어하고 다음 예제에서 아크의 차이를 경험합니다.
<SVG>
<경로 d = "m80 80
45 45, 0, 0, 0, 125 125
L 125 80 Z "Fill ="Green "/>
<경로 d = "m230 80
45 45, 0, 1, 0, 275 125
L 275 80 z "Fill ="Red "/>
<경로 d = "m80 230
45 45, 0, 0, 1, 125 275
L 125 230 z "Fill ="Purple "/>
<경로 d = "M230 230
45 45, 0, 1, 1, 275 275
L 275 230 z "Fill ="Blue "/>
</svg>
이 HTML은 다음 그림을 그립니다.
위에서부터 이러한 매개 변수는 실제로 ARC 섹션을 결정하는 데 필요한 유일한 매개 변수임을 알 수 있습니다. SVG의 아크는 캔버스의 아크보다 더 복잡하다는 것도 여기에서 볼 수 있습니다.
입방 베 지어 곡선 지침 그리기 : C X1 Y1, X2 Y2, XY입방 베 지어 곡선에는 (x1, y1)과 (x2, y2), 마지막 (x, y)은 곡선의 종말점을 나타냅니다. 다음 예제를 경험하십시오.
<SVG>
<경로 d = "m10 10 c 20 20, 40 20, 50 10"stroke = "black"fill = "Transparent"/>
<경로 d = "m70 10 c 70 20, 120 20, 120 10"stroke = "black"fill = "Transparent"/>
<경로 d = "m130 10 c 120 20, 180 20, 170 10"stroke = "black"fill = "Transparent"/>
<Path D = "M10 60 C 20 80, 40 80, 50 60"Stroke = "Black"Fill = "Transparent"/>
<Path D = "M70 60 C 70 80, 110 80, 110 60"Stroke = "Black"Fill = "Transparent"/>
<Path D = "M130 60 C 120 80, 180 80, 170 60"Stroke = "Black"Fill = "Transparent"/>
<경로 d = "M10 110 C 20 140, 40 140, 50 110"Stroke = "Black"Fill = "Transparent"/>
<Path D = "M70 110 C 70 140, 110 140, 110 110"Stroke = "Black"Fill = "Transparent"/>
<Path D = "M130 110 C 120 140, 180 140, 170 110"Stroke = "Black"Fill = "Transparent"/>
</svg>
이 HTML 스 니펫은 다음 그림을 그립니다.
위에서 우리는 제어점이 곡선의 라디안을 제어한다는 것을 알 수 있습니다.
Cubic Bezier 곡선의 특수 버전 : SX2 Y2, XY여러 번 부드러운 곡선을 그려 보려면 곡선을 여러 번 연속적으로 그리는 것이 필요합니다. 이 시점에서, 전환을 부드럽게하기 위해, 두 번째 곡선의 제어점은 종종 곡선의 다른쪽에있는 첫 번째 곡선 제어점의 매핑 지점이다. 이 단순화 된 버전은 현재 사용될 수 있습니다. 여기서 S 명령에 다른 S 명령 또는 C 명령이 없으면 두 제어 지점은 동일하게 간주되고 2 차 베 지어 곡선으로 변성 될 것입니다. S 명령이 다른 S 명령 또는 C 명령 후에 사용되는 경우 후속 S 명령의 첫 번째 제어점은 기본적으로 이전 곡선의 두 번째 제어점의 매핑 지점으로 설정됩니다. 그것을 경험합시다 :
<SVG>
<Path D = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"Stroke = "Black"Fill = "Transparent"/>
</svg>
이 HTML 조각은 다음과 같이 그려집니다.
위의 S 명령에는 두 번째 제어점이 있으며 첫 번째 제어점은 이전 곡선 명령의 두 번째 제어점의 매핑 지점을 사용합니다.
2 차 베 지어 곡선 지침 그리기 : QX1 Y1, XY, T XY (2 차 베 지어 곡선의 특수 버전) 2 차 Bezier 곡선에는 하나의 제어점 (x1, y1)이 있으며, 이는 일반적으로 아래 그림에 표시됩니다.곡선을 지속적으로 그리는 경우 단순화 된 버전 T를 사용할 수도 있습니다. 마찬가지로, t와 마찬가지로, t가 q 또는 t 명령 전만 있으면 후속 t 명령의 제어점은 기본적으로 이전 곡선의 제어점의 매핑 지점으로 설정됩니다. 그것을 경험합시다 :
<SVG>
<경로 d = "M10 80 Q 52.5 10, 95 80 T 180 80"Stroke = "Black"Fill = "Transparent"/>
</svg>
이 HTML 조각은 다음과 같이 그려집니다.
마찬가지로, t 명령에 q 또는 t 명령이 우선하지 않으면 제어점이없고 그려진 선은 직선입니다.
상대 좌표 그리기 명령어 절대 좌표 그리기 명령어의 글자는 모두 소문자임을 제외하고는 동일합니다. 이 명령어 세트의 매개 변수에서 좌표에 관여하는 매개 변수는 상대 좌표를 나타냅니다. 이는 매개 변수가 현재 지점에서 대상 지점까지 오프셋을 나타내고, 양수는 축에 대한 양의 오프셋을 나타내고, 음수 숫자는 역 오프셋을 나타냅니다. 그러나 Z 지침의 경우 경우에는 차이가 없습니다.절대 좌표 지침 및 상대 좌표 지침을 혼합 방식으로 사용할 수 있음 을 알 수 있습니다. 때로는 혼합 된 사용이보다 유연한 드로잉 방법으로 이어질 수 있습니다.
SVG 경로 드로잉에 대한 메모 : 구멍이있는 그림을 그리면주의를 기울여야합니다. 외부 가장자리의 도면은 시계 반대 방향이어야하며 내부의 구멍의 가장자리 순서는 시계 방향이어야합니다. 이러한 방식으로 그려진 그래픽 채우기 효과 만 올바르게됩니다. 실제 참조 :스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
개발 센터 : https://developer.mozilla.org/en/svg
인기있는 참조 : http://www.chinasvg.com/
공식 문서 : http://www.w3.org/tr/svg11/