HTML522 [SVG] preserveAspectRatio 고정종횡비 preserveAspectRatio 고정종횡비고정종횡비란?종횡비란 화면의 가로대 세로의 크기비율이라고 합니다. 고정종횡비는 가로세로비율의 크기를 고정시키는걸 고정종횡비라고 합니다. SVG의 경우 이미지의 가로세로 사이즈변경 작업을 진행할때 고정종횡비로 인해 원하는 풀사이즈로의 가로세로 크기변경이 되지 않습니다.width 속성과 height 속성을 분명히 변경하였는데 width 속성만 먹힌다거나 height 속성만 먹혀서 원하는 사이즈가 나오지않는다면 곤란하죠.그런 문제를 해결하기위해 나온 속성이 preserveAspectRatio 속성 입니다.MDN에 SVG 속성 명세에 따르면 preserveAspectRatio는 10개의 align 속성과 2개의 meetOrSlice 속성을 제공하고있습니다.none :.. 2015. 10. 19. [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 Editor 분석-3 Path 포인트 정의하기 SVG Editor 에서는 SVG 에디터 답게 SVG의 패스포인트를 직접 수정할 수 있다. path 의 경우 객체에 마우스를 두번 클릭하면 자동적으로 path 포인트를 따낸다. 하지만 rect나 polyline , ellipse같은 경우 상단 메뉴에서 convert to path 로 변경하면 type 을 path로 변경하면서 중요 포인트 (각) 를 path 포인트로 짚어낸다.태그 자체를 path 로 변경하고 d 를 attribute 로 추가하여 d의 path 포인트를 따내니 정말 훌륭하다.새삼 이세상에는 진짜 외계인을 옆에 두고 고문하면서 개발하는 개발자들이 많다는걸 느낀다.각설하고, path 로 변경되면서 각 path 포인트를 직접 수정할 수 있도록 하는데 그 과정의 로직을 정리해본다.convert t.. 2015. 6. 15. SVG pathsegType SVG DOM 의 pathsegType 을 이용하면 각 path 의 attribute 에 따라 실행을 정의할 수 있다.SVG Editor 에서 path point 정의를 내릴 때 pathsegType 을 이용해서 각 포인트 타입 별로 실행은 제어한다.M , L , Z 등등 타입을 숫자로 분류해서 구분한다.Interface SVGPathSegsingle segment 는 하나의 path data 의 설명에 부합한다.IDL Definition interface SVGPathSeg { // Path Segment Types const unsigned short kSVG_PATHSEG_UNKNOWN = 0; // ? const unsigned short kSVG_PATHSEG_CLOSEPATH = 1; // z.. 2015. 6. 15. 이전 1 2 3 4 ··· 6 다음
