HTML5/SVG23 [SVG] SVG matrix interface 본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.SVG matrix interfaceEDIT수많은 SVG 그래픽 오퍼레이션은 아래와 같은 2X3 행열을 활용하고있다.[a c e] [b d f]아래와같이 3x3 행렬은 행렬간의 계산을 위한 목적으로 확장되어 만들어졌다.[a c e] [b d f] [0 0 1]SVGMatrix 수정하기위해 시도하면 예외를 던지도록 읽기전용으로만 설계되었다. 인터페이스 개요Also implementNoneMethodsSVGMatrix multiply(in SVGMatrix secondMatrix)SVGMatrix inverse()SVGMatrix translate(in float x, in float y)SVGMatrix.. 2015. 11. 23. [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. 이전 1 2 3 4 ··· 6 다음
