지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 15:46:13
원래의
1539명이 탐색했습니다.

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">
삶을 위해 변화하고, 변화를 위해 창조하세요.

관련 라벨：
html5 svg 教程
원천：php.cn
이전 기사：Html5 플러그인 튜토리얼: 제품 디스플레이에 브라우저 돋보기 효과 추가 window_html5 튜토리얼 기술 다음 기사：소스 코드 download_html5 튜토리얼 기술을 사용하여 HTML5 코드 기반의 접기 메뉴 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿