본문 바로가기

SVG14

SVG Filters * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG Filters - Intro 지원되는 브라우저크롬 8.0 이상IE 10.0 이상FF 3.0 이상사파리 6.0 이상오페라 9.6 이상 SVG 필터 요소다음 장에서부터는 터치(설정할수있는)가 가능한 필터들만 보여줄 것이다. 그리고 SVG를 이용해서 어떤것들을 할 수 있는지 아이디어를 줄 것이다.SVG에서 사용가능한 필터 목록 : - 이미지결합 필터 - 색상변화를위한 필터 - 그림자 효과를 위한 필터 - 빛을 위한 필터 - 빛을 위한 필터 - 빛을 위한 필터Tip : 각각의 SVG요소에 여러개의 필터를 중복해서 사용이 가능하다. 출처 W3School.com - SVG - Filter.. 2015. 6. 9.
SVG Stroking * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다.SVG Stroke Properties SVG는 다양한 범위의 선긋기 속성을 제공한다. strokestroke-widthstroke-linecapstroke-dasharray모든 선긋기 속성은 어떤 종류의 선이든 텍스트 그리고 원같은 요소의 테두리에 적용이 가능하다. SVG stroke Propertystroke 속성은 색상을 결정한다. Sorry, your browser does not support inline SVG. SVG 코드 SVG stroke-width Propertystroke-width 속성은 선의 두께를 결정한다. Sorry, your browser does not s.. 2015. 6. 8.
SVG Text * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다.SVG Text - 태그는 text를 정의할때 사용한다. 예제 1text를 쓴다: I love SVG! Sorry, your browser does not support inline SVG. SVG 코드 I love SVG! 예제 2텍스트 회전 I love SVG Sorry, your browser does not support inline SVG. SVG 코드 I love SVG 예제 3텍스트 태그는 태그를 이용하여 각각의 text들을 정렬 할 수 있다. 각각의 태그들은 다른 포맷과 위치를 가지고 있다. Several lines: First line. Second line. Sorry.. 2015. 6. 8.
SVG Path * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG Path - 태그는 path를 정의할때 사용한다.밑의 명령어들은 path 정보들을 구하는데 사용된다.M = moveto 기준점이동L = lineto 선으로이동H = horizontal lineto 가로선이동v = vertical lineto 세로선이동C = curveto 곡선이동S = smooth curveto 부드러운 곡선이동Q = quadratic Bezier curve 2차 베지어 곡선T = smooth quadratic Bezier curveto 부드러운 2차 베지어 곡선A = elliptical Arc 타원형의 호Z = closepath 패스닫기Note : 모든 명령어.. 2015. 6. 8.