본문 바로가기

분류 전체보기100

SVG Radial * 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.* 필자의 기준이 절대적인 진리는 아닙니다. SVG Radial Gradient - 태그는 radial 그라디언트를 정의할 때 사용한다.태그는 반드시 태그 내에 위치해야한다. 태그는 정의를 생략하거나 그라디언트와 같이 특별한 요소를 정의할 때 사용한다. 예제 1방사형(radial) 그라디언트를 원형에 그린다. 색상은 흰색에서 파란색으로 바뀐다. SVG 코드 코드 설명cx , cy , r 속성은 가장 바깥쪽 원형을 정의한다. fx , fy 는 가장 안쪽의 원형을 정의한다. 예제 2다른 원형을 정의한다. SVG 코드 출처 W3School.com - SVG - SVG Radialhttp://www.w3schools.com/svg/sv.. 2015. 6. 9.
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.

티스토리툴바