찾다

집  >  기사  >  웹 프론트엔드  >  HTML5의 SVG_html5 튜토리얼 기술에 대한 심층 분석

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

WBOY
WBOY원래의
2016-05-16 15:46:131544검색

SVG 배경

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

또는 요소를 사용하여 기본 SVG 그래픽을 표시합니다.
SVG 그래픽을 CSS 배경 이미지로 적용합니다. HTML 문서의 태그(HTML5 지원 필요)
CSS 또는 외부 개체 요소를 사용하는 HTML 요소에 SVG 변환, 필터 및 기타 특수 효과를 사용합니다.
SVG 개체에 Photoshop과 같은 효과를 사용합니다. 흐림 및 색상 조작
SVG 이미지와 함께 애니메이션 사용
SVG 형식의 글꼴 사용;
* SVG
* 기본 콘텐츠

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

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





코드 복사

코드는 다음과 같습니다.




SVG는 직사각형을 그립니다



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






< /html>
* 원 요소







* 타원 요소






* 선 요소





< line x1="200" y1="200" x2="200" y2="10" 스트로크-폭="10" 스트로크="블랙"/>

< ;/ body>
* 폴리라인 요소



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



* 다각형 요소
<다각형 포인트="" />


<폴리라인 포인트="10, 10 200,10 200,200 10,200 100,100 10,10" 스트로크 너비="5" 스트로크="블랙" fill="white"/>


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





<정지 오프셋= "50%" stop-color="green" />





< /svg>

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


코드 복사
코드는 다음과 같습니다.


< svg width="500px" height="500px">
삶을 위해 변화하고, 변화를 위해 창조하세요.

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Html5 플러그인 튜토리얼: 제품 디스플레이에 브라우저 돋보기 효과 추가 window_html5 튜토리얼 기술다음 기사：Html5 플러그인 튜토리얼: 제품 디스플레이에 브라우저 돋보기 효과 추가 window_html5 튜토리얼 기술

관련 기사

더보기