HTML5의 SVG_html5 튜토리얼 기술에 대한 심층 분석

SVG 배경

SVG는 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽을 의미합니다. 1998년 월드와이드웹 컨소시엄은 XML, 즉 SVG를 통해 벡터 그래픽을 표현하는 기술을 개발하기 위해 실무그룹을 설립했습니다! SVG는 XML 파일이기도 하므로 SVG는 XML의 개방성, 이식성 및 상호 작용성의 장점도 상속합니다. 요즘에는 거의 모든 주요 브라우저가 SVG를 지원합니다. 여기에서 다음을 포함한 더 많은 호환성 정보를 얻을 수 있습니다.

또는

* SVG는 HTML5만의 콘텐츠가 아닙니다

* HTML5는 SVG에 대한 기본 콘텐츠를 제공합니다
* HTML5가 등장하기 전에도 SVG 콘텐츠가 있었습니다
* SVG는 간단히 말해서 벡터 이미지입니다
* SVG 파일의 확장자는 ".svg"입니다
* SVG는 XML 구문을 사용합니다
* 개념
* SVG는 XML 기술을 사용한 설명입니다. 2차원 그래픽
* SVG의 특징
* SVG로 그린 그래픽은 검색엔진에서 크롤링 가능
* SVG는 이미지 품질 저하 없이 확대 가능
* SVG와 Canvas의 차이점
* SVG
* 해상도에 의존하지 않음
* 이벤트 바인딩 지원
* 렌더링 영역이 큰 프로그램(예: 바이두 지도)
* 웹 게임 구현에 사용할 수 없음
* 캔버스
* 해상도에 따라 다름
* 이벤트 바인딩을 지원하지 않음
* 웹 게임에 가장 적합
* ".jpg" 형식으로 이미지 저장
* 사용법
* 일부 작은 파일 웹 페이지 아이콘
* 웹 페이지의 동적 특수 효과(애니메이션 효과)
* HTML5에서 SVG 사용
* 요소 사용
* 기능 - 요소
* 기본 크기는 300px*150px
* CSS 스타일 사용
* SVG를 사용하여 그래픽을 그리려면
* 그래픽 그리기 요소를 정의해야 합니다. >* 직사각형 요소





코드 복사

코드는 다음과 같습니다.

< ;!--
HTML 페이지에서 svg 태그를 사용하는 경우
* 요소 정의
* 요소의 역할과 유사합니다. > * 기본 크기 300px * 150px
* 너비 및 높이 설정 - 속성 및 스타일
* svg를 사용하여 그린 모든 그래픽은
* svg를 사용하여 그린 그래픽은 HTML과 관련됩니다. 페이지
-->







* 원 요소






body>
* 타원 요소





body>
* 선 요소








* 폴리라인 요소



요소 - 폴리라인
* 포인트 - 시작점, 꼭지점, 끝점 설정
* ","를 사용하여 x와 y를 구분합니다.
* 여러 개 사이에 사용 점 공백 분리
폴리라인의 특징
* 폴리라인의 영역(시작점부터 끝점까지)은 기본적으로 검정색으로 제공됩니다.
-->



* 다각형 요소






* 특수 효과 요소
* 그라데이션 - 그라데이션 요소는 요소 내에 정의됩니다
* 선형 그라데이션 -
* 이 요소는 시작 요소입니다











defs>

* 섹터(Ray) 그라데이션-
* 필터-가우스 흐림
* 필터는 요소를 사용합니다
* 요소-가우스 흐림
* ="SourceGraphic"
* stdDeviation - 흐림 수준 설정

코드 복사

코드는 다음과 같습니다.

삶을 위해 변화하고, 변화를 위해 창조하세요.