svj.js? svg javascript libarary

javascript을 이용한 svg.js 사용

1.index.html 파일 수정

<html>
    <head>
        <title>test svg.js</title>
    </head>
    <body>
    </body>
</html>

2. body아래에 svg.js cdn link 추가, 작업용 index.js 파일 추가

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">

3. index.js 간단한 sample용 code 추가
-간단한 예제로 div id darwing를 가지는 SVG instance를 생성
-그 이후 svg에 rect 객체 생성후 fill attribute 설정

var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });

4. index.html에 drawing id를 가지는 div 추가

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">
<div id="drawing"></div>

5.nginx를 통해 실행시 아래와 같은 error발생

6.원인은 body아래 script가 load된 시점 이전에 div tag가 없기에 해당 node를 찾을 수 없다는 error가 발생
즉, div tag를 index.js 상단으로 위치 이동

<div id="drawing"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script> 
<script type="text/javascript" src="index.js">

7.결과 화면