HTML5/SVG

SVG Editor 분석-1 [DOM 구조파악]

Jundol 2015. 6. 10. 12:00



DOM 구조

<div> 태그를 이용해서 큰 틀을 잡았다.

큰 틀 전부 div 요소로 이루어져있고 1번을 제외한 나머지는 display : none 상태

때에 따라 보이는 방법은 inline 과 block 속성값으로 처리됨.

  1. svg_editor : svg 에디터부분
  2. svg_source_editor : 소스로 볼 팝업 창
  3. svg_docprops : 왼쪽 상단 메뉴창의 document property 팝업창
  4. svg_prefs : 왼쪽 상단 메뉴창의 editor option 팝업창 [Editor Preferences]
  5. dialog_box : 왼쪽 상단 메뉴창의 export 팝업창
  6. cmenu_canvas : 캔버스에 우클릭시 나타나는 메뉴창
  7. cmenu_layers : 오른쪽 사이드바 레이어 우클릭시 나타나는 메뉴창


1. SVG 에디터 부분

  1. rulers : 에디터의 가늠자 구분선
  2. workarea : 작업공간 , 실질적 편집공간
  3. sidepanels : 우측 사이드바 , 초기에 접혀있는 상태의 레이어 버튼을 누르면 width 속성값이 150으로 늘어나면서 확장되는 형식.
  4. main_button : 왼쪽 상단 SVG-Edit 라는 메인 메뉴 버튼
  5. tools_top : 상단 속성메뉴
  6. cur_context_panel : 뭔지모르겠음...
  7. tools_left : 좌측 툴 선택메뉴
  8. tools_bottom : 하단 속성메뉴
  9. option_lists : 상단 속성메뉴에서 드롭다운 리스트가 가능한 요소들의 드롭다운 메뉴 집합소
  10. color_picker : 색상 선택 팝업 창
  11. tools_rect : 좌측 사각형 선택 툴을 길게 눌러서 다른 사각형 선택 툴을 선택할 수 있는 요소
  12. tools_ellipse : 원형 선택 확장메뉴 위 사각형과 같음
  13. tools_line : 선 선택 확장메뉴
  14. tools_shapelib : shape 선택 확장 라이브러리 (너무 많은것같아 lib로 만든것 같군요)

1-1 : workarea 

  1. style 태그 styleoverrides : 동적으로 스타일 추가
    #svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}
    마우스 커서의 포인터를 지정. 삭제할 경우 객체에 마우스 오버시 이동 커서 나타나지 않음
  2. svgcanvas : svg 그리는 캔버스
    ㄴsvgroot : svg의 root DOM 요소
1-1-1 : svgroot
  1. <defs> 
    ㄴ 필터와 그리드패턴이 정의되어있음.
  2. <svg> canvasBackground : 흰색 바탕 캔버스를 rect로 그려냈고, canvasGrid 를 이용 grid DOM 요소가 있음. 상단 메뉴의 그리드를 on/off 선택시 diplay 속성값이 변경되면서 나타남.
  3. <animate> opacity
  4. <svg> svgcontent : 객체가 위치하는 곳
  5. <g> selectorParentGroup : 객체를 선택할때 그룹핑하는 요소