HTML5/SVG23 SVG Linear Gradients * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG Gradients그라디언트란 하나의 색상에서 또 다른 하나의 색상으로 자연스럽게 변화가 가능한 기능이다. 게다가 몇몇의 색상의 변화는 같은 요소에 적용이 가능하다.SVG의 그라디언트 타입은 두 가지가 있다.LinearRadial SVG Linear Gradient - 태그는 linear gradient 를 정의할때 사용한다. 태그는 반드시 태그와 중첩되어야한다. 태그는 그라디언트와같은 특별한 속성을 정의하거나 정의를 생략할때 사용한다. Linear 그라디언트는 세로 혹은 가로로 적용이 가능 하다.가로 그라디언트는 y1 과 y2 가 동일하고 x1 과 x2가 다르다.세로 그라디언트.. 2015. 6. 9. SVG Drop Shadows * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG 예제 1태그는 그림자 효과를 내기 위해 사용한다. 이 태그는 SVG 그래픽에서 착안하였다. 그리고 xy 면을 조금 이동하였다.offset의 첫번째 예제는 직사각형과 offset태그이다. 그 후 태그를 사용하여 진짜 offset이미지의 제일 위에 그려낸다. SVG 코드 코드 설명태그 내의 id 속성은 filter의 유니크한 이름을 나타낸다.태그 내의 filter속성은 속성값의 이름을 filter id 이름과 매핑한다. 예제 2이제, offset 이미지를 태그를 이용하여 흐리게 만들 수 있다. SVG 코드 코드 설명 내의 stdDeviation 속성은 blur 의 양을 나타낸다. .. 2015. 6. 9. SVG Blur Effects * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. , 모든 인터넷상 SVG필터들은 요소 안쪽에 정의하고있다. 요소는 정의를 생략하기 위하거나 필터같은 특별한 요소의 정의를 포함하기도한다. 요소는 SVG 필터를 정의하기위해 사용한다. 요소는 각 필터들을 구분하기 위해서 id속성을 필요로 한다. SVG 예제 1요소는 blur 효과를 나타내기 위해 사용한다. SVG 코드 코드 설명태그 내의 id 속성은 필터의 유니크한 이름을 부여하는데 사용한다.blur효과를 내기 위해 태그를 사용했다.in="SourceGraphic" 부분은 전체 요소에 효과를 만들기 위해 사용한다.stdDeviation 속성은 blur의 양을 결정하는데 사용한다.태그 내.. 2015. 6. 9. 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. 이전 1 2 3 4 5 6 다음
