SVG 에 대해서
SVG는 XML로 2차원 그래픽을 표현하기 위한 마크업 언어입니다. SVG는 3가지 그래픽 객체 타입(벡터 그래픽, 이미지 그래픽, 텍스트)을 허용합니다. 우리는 그래픽 객체들에 대해 그룹화, 스타일 설정, 이전 그려진 객체에 포함을 할수 있습니다. 기능들에는 계층 변형, 패스 클리핑, 알파 마스크, 필터 효과 그리고 템플릿 객체가 있습니다.
기본 DOM 인터페이스
SVGElement 인터페이스
모든 SVG DOM 인터페이스는 SVG 언어와 대응됩니다.
interface SVGElement : Element Attribute
id(DOM String)
Element에 설정한 id 값이거나 id 값을 설정하지 않았다면 비어있는 문자열입니다.
xmlbase
주어진 Element에 해당하는 'xml:base' 속성입니다. xml:base 속성은 문서 또는 외부 엔티티의 기본 uri가 아닌 기본 uri를 지정할 수 있습니다.
ownerSVGElement
가장 가까운 조상 'svg' 요소입니다. 만약 가장 밖의 svg라면 Null입니다.
viewportElement
현재 뷰포트를 만드는 Element 입니다. 종종 가장 가까운 부모 'svg' element 이기도 합니다. 가장 바깥 svg Element 일경우 Null입니다.
Basic Shapes
rect
rect Element는 축에 정렬된 사각형으로 정의됩니다. 둥근 모서리 사각형은 rx, ry 요소를 세팅해서 만들 수 있습니다.
attribute
x
사각형의 모서리 작은 x축 좌표 값 입니다. 기본 값은 0입니다.
y
사각형의 모서리 작은 y축 좌표 값 입니다. 기본 값은 0입니다.
width
사각형의 넓이입니다. 음수 값은 에러 처리 됩니다. 값이 0 이되면 rendering element가 비활성화됩니다.
height
사각형의 높이입니다. 음수 값은 에러 처리 됩니다. 값이 0 이되면 rendering element가 비활성화됩니다.
rx
타원의 x축 반지름을 사용해 둥근 사각형을 만듭니다. 음수는 에러 처리 됩니다.
ry 타원의 y축 반지름을 사용해 둥근 사각형을 만듭니다. 음수는 에러 처리 됩니다.
XML RECT SVG 예제
fill 속성를 사용해서 사각형의 색을 채우고 stroke 속성을 사용해서 테두리 색을 지정합니다.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect01 - rectangle with sharp corners</desc>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
HTML SVG Rect 생성
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg id="root" style="width: 500px;height:500px">
<rect x="100" y="50" width="100" height="50" fill="red"></rect>
</svg>
</body>
</html>
Javascript DOM Rect 생성
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg id="root" style="width: 500px;height:500px">
</svg>
</body>
<script >
var root = document.getElementById("root");
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
rect.x = 50;
rect.y = 10;
rect.style.width = 100;
rect.style.height = 50;
rect.style.fill = 'red';
root.appendChild(rect);
</script>
</html>
이 예제의 경우 rect Element를 생성할때 createElementNS라는 함수를 사용합니다.
SVG의 구현에 대한 네임 스페이스(Namespace) 명세가 해당하는 주소에 있기 때문입니다.
그렇다면 왜 HTML SVG DOM에서는 namespace를 몰라도 가능할까요?
그 이유는 HTML 파서가 DOM으로 변환을 하면서 svg, rect의 namespace를 알고 변환해서 보여주기 때문입니다.
따라서 Javascript에서 DOM Element 생성을 하기 위해선 네임스페이스를 명시하고 rect를 생성해야합니다.
참고 자료
https://www.w3.org/TR/SVG11/intro.html
https://www.w3.org/TR/SVG11/types.html
https://www.w3.org/TR/SVG11/shapes.html#RectElement
http://stackoverflow.com/questions/23319537/html-5-inline-svg-and-namespace-awareness-for-svg-dom
'프로그래밍' 카테고리의 다른 글
| xps 15 9550 VT 지원 (0) | 2017.01.23 |
|---|---|
| Visual Studio Code Markdown (0) | 2017.01.17 |
| Visual studio 언어 설정 (0) | 2017.01.13 |
| LValue, RValue 에 관해서 (0) | 2016.12.25 |
| SVN-Git GitLab 마이그레이션 (0) | 2016.12.17 |