이 글에서는 기본 그래픽 그리기 및 간단한 그라데이션 효과 소개를 포함하여 HTML5를 사용하여 SVG 벡터 그래픽을 그리는 입문 튜토리얼을 주로 소개합니다. IE의 이전 버전에서는 이를 잘 지원하지 않으므로 필요한 친구는 참조할 수 있습니다.
VG는 2D 그래픽을 설명하는 데 사용되는 언어인 Scalable Vector Graphics의 약자입니다. 그래픽 애플리케이션은 XML을 사용하여 작성된 후 SVG 리더 프로그램에 의해 렌더링됩니다.
SVG는 원형 차트, X, Y 좌표계의 2차원 차트 등과 같은 벡터 유형 차트에 주로 사용됩니다.
SVG는 2003년 1월 14일에 W3C 권장 사항이 되었습니다. SVG 사양 페이지에서 최신 버전의 SVG 사양을 볼 수 있습니다.
SVG 파일 보기
대부분의 웹 브라우저는 PNG, GIF 및 JPG 그래픽을 표시할 수 있는 것처럼 SVG를 표시할 수 있습니다. IE 사용자는 브라우저에서 SVG를 보려면 Adobe SVG Reader를 설치해야 할 수도 있습니다.
HTML5에 SVG 삽입
HTML5를 사용하면 __486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948 태그를 사용하여 SVG를 직접 삽입할 수 있습니다. 다음은 간단한 구문입니다.
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
HTML5 - SVG Circle
여기는 HTML5입니다. 원을 그리기 위해 30de22e41cb8eb8fbfdc1f091d85e4be 태그를 사용하는 SVG 예제 버전:
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg> </body> </html>
HTML5가 활성화된 최신 버전의 FireFox에서 생성:
HTML5 - SVG Rectangle
여기는 SVG 예제입니다. 직사각형을 그리기 위해 b4bf76d38c0ddeed94a3943f1fc9c8ad 태그를 사용하는 HTML5 버전:
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Rectangle</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <rect id="redrect" width="300" height="100" fill="red" /> </svg> </body> </html>
HTML5가 활성화된 최신 버전의 FireFox에서는 다음과 같은 결과가 생성됩니다.
HTML5 - SVG Lines
여기는 HTML5 버전의 SVG 예에서는 15a73cc5312745b1b00671f6e690e36a 태그를 사용하여 선을 그립니다.
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Line</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/> </svg> </body> </html>
스타일 속성을 사용하여 획, 채우기 색상, 획 너비 등과 같은 추가 스타일 정보를 설정할 수 있습니다.
HTML5를 사용하는 최신 버전의 FireFox에서는 다음 결과가 활성화되었습니다.
HTML5 - SVG Ellipse
다음은 d9b42b40d0fdc429c7c48871eea4816c 태그를 사용하여 타원을 그리는 SVG 예제의 HTML5 버전입니다.
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Ellipse</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" /> </svg> </body> </html>In HTML5가 활성화된 최신 버전의 FireFox는 다음과 같은 결과를 생성합니다.
HTML5 - SVG Polygon
다음은 6f1cb7f8499a7e0f625f982868cbc44d 태그를 사용하여 SVG 예제의 HTML5 버전입니다. :
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Polygon</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <polygon points="20,10 300,20, 170,50" fill="red" /> </svg> </body> </html>HTML5가 활성화된 경우 최신 버전의 FireFox는 다음과 같은 결과를 생성합니다.
HTML5 - SVG Polyline
다음은 ce803ba1a4290bddb3ba9c6f57d4c9b4 태그를 사용하여 SVG 예제의 HTML5 버전입니다. 꺾은선형 차트:
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Polyline</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /> </svg> </body> </html>HTML5를 활성화하면 최신 버전의 FireFox에서 다음 결과가 생성됩니다.
HTML5 - SVG Gradient
다음은 <를 사용하는 SVG 예제의 HTML5 버전입니다. ;ellipse> 태그를 사용하여 타원을 그리고 0649cc1cc16c8306177acf255def2211 태그를 사용하여 SVG 방사형 그래디언트를 정의합니다.
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Gradient Ellipse</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /> </svg> </body> </html>HTML5가 활성화된 최신 버전의 FireFox에서는 다음과 같은 결과가 생성됩니다. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목해주세요! 관련 권장 사항:
HTML5 사용 방법
파일 인터페이스는 웹 페이지에서 파일을 다운로드하는 데 사용됩니다
HTML5에서 그림 회전의 애니메이션 효과를 얻는 방법
HTML5 Canvas는 곡선 그리기 방법을 구현합니다
위 내용은 HTML5를 사용하여 SVG 벡터 그래픽을 그리는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!