본문 바로가기

SVG14

[SVG] document.createElementNS document.createElementNS네임스페이스를 사용하여 새 Element 노드를 생성한다. SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement 를 사용하면 안되고 createElementNS 를 사용해야 한다.createElement 를 사용해서 동적 삽입할 경우 개발자도구의 태그에는 추가된것으로 보이지만, 실제로 화면에 그려지진 않는다. element = document.createElementNS(namespaceURI, qualifiedName);parameternamespaceURI : 새 element 에 대한 네임스페이스를 가리키는 유일한 식별자다. 네임스페이스가 없다면 null이 할당된다.qualifiedName: 새 element에 대한 완결된 이름. re.. 2015. 10. 5.
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.