최신 웹 개발 튜토리얼
 

SVG예


시도-을 자신에게 예를

아래의 예는 HTML 코드에 직접 SVG 코드를 포함.

이 파이어 폭스, 인터넷 익스플로러 9, 구글 크롬, 오페라, 사파리에서 지원됩니다.


SVG 예

SVG 기본 도형


구형
불투명도를 가진 직사각형
불투명도 2 사각형
모서리가 둥근 사각형
타원
서로의 상단에 세 개의 타원
두 타원
라인
삼면이있는 다각형
네면을 가진 다각형
스타
또 다른 스타
폴리 라인
또 다른 폴리 라인
경로
2 차 베 지어 곡선
텍스트 쓰기
텍스트를 회전
여러 줄의 텍스트
링크로 텍스트
선, 텍스트 또는 윤곽의 색 정의 (stroke)
광고, 텍스트 또는 윤곽의 폭을 정의 (stroke-width)
열린 경로로 엔딩의 다른 유형을 정의합니다 (stroke-linecap)
점선을 정의 라인 (stroke-dasharray)

SVG 필터

feGaussianBlur - 흐림 효과
feOffset은 - 다음 오프셋 이미지 위에 원본을 혼합, 사각형을 오프셋 (offset)
feOffset는 - 오프셋 이미지를 흐리게
feOffset - 그림자 검은 색을
feOffset은 - 색으로 그림자를 치료
feBlend 필터
필터 1
필터 2
필터 (3)
필터 (4)
필터 (5)
필터 (6)

SVG 그라디언트

빨간색 노란색에서 수평 선형 그라데이션 타원
빨간색 노란색에서 수직 선형 구배 타원
빨간색 노란색에서 수평 선형 그라데이션 타원, 및 텍스트
파란색 흰색에서 방사형 그라데이션으로 타원
파란색 흰색에서 방사형 그라데이션으로 또 다른 타원

SVG 기타

반복 오초 이상 사라질 직사각형
색상을 변경하는 성장 구형
색상을 변경합니다 세 개의 사각형
모션 경로를 따라 텍스트를 이동
모션 경로를 따라 이동, 회전 및 크기 조절 텍스트
이동, 회전 및 크기 조절 동작 패스를 따라 텍스트 + 성장 사각형 색상을 변경할 것
타원을 회전