[JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기

201_자바스크립트에서 SVG 요소 애니메이션 효과 주기 [적용] 시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때 [내용] SVG는 DOM의 형식 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있다. 예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와 조금씩 변경하면 된다. 이때는 requestAnimationFrame()을 사용한다. HTML index.html JavaScript main.js const myCircle = document.querySelector('#myCircle'); let time = 0; animate(); function animate() { // 시간 변화 time += 0.1; // ..

2022.07.26

[JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기

200_자바스크립트에서 SVG 요소 마우스로 다루기 [적용] SVG 요소의 스타일을 변경하고 싶을 때 [내용] 마우스에 반응하는 SVG 요소의 생성은 DOM에 대한 이벤트 설정을 통해 가능하다. 예를 들어 클릭 이벤트의 확인은 document.querySelector()로 SVG 요소를 참조하고, addEventListener()로 클릭 이벤트를 감시한다. HTML index.html JavaScript main.js const circle = document.querySelector('#myCircle'); circle.addEventListener('click', (event) => { alert('클릭 이벤트가 발행하였습니다.'); }); 실행결과 원을 클릭하면 알림창이 표시된다. 참조 : 실무에 ..

2022.07.26

[JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기

199_자바스크립트에서 SVG 요소 스타일 변경하기 [적용] 유저 조작에 반응하는 그래픽을 넣고 싶을 때 [문법] 메소드 의미 반환 요소.setAttribute(속성, 값) 요소의 속성 설정 없음 [내용] SVG 요소는 document.querySelector() 등을 사용한 참조와 setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다. SVG는 HTML의 DOM과 같은 방식으로 사용할 수 있다. HTML index.html JavaScript main.js const circle1 = document.querySelector('#myCircle'); circle1.setAttribute('r', '100'); // 반직름 지정 circle1.setAttribute('fill', '#..

2022.07.26

[JavaScript] 자바스크립트에서 SVG 요소를 동적으로 추가하기

198_자바스크립트에서 SVG 요소를 동적으로 추가하기 [적용] 자바스크립트로 외부의 데이터를 참조하여 그래픽 작업을 하고 싶을 때 [문법] 메소드 의미 반환 document.createElementNS ('http://www.w3.org/2000/svg', SVG요소명) SVG 요소 생성 SVG 요소 [내용] HTML index.html document.createElement() 가 아닌 document.createElementNS()를 사용해 SVG 요소를 자바스크립트로 생성할 수 있다. 비슷한 메소드의 이름이지만, SVG 요소는 끝에 NS(이름공간, Name Space)가 붙어 있다. HTML과 SVG는 엄밀히 이름공간이 다르므로 'http://www.w3.org/200/svg'를 지정하지 않으면..

2022.07.26

[JavaScript] 자바스크립트에서 SVG 사용하기

197_자바스크립트에서 SVG 사용하기 [적용] 확대와 축소 시에도 화질이 유지되는 이미지를 사용하고 싶을 때 다양한 스마트 기기에서 반응형 그래픽을 사용하고 싶을 때 [내용] SVG는 Scalable Vector Graphics의 약자로 벡터 이미지를 표현한다. 이미지 확대와 축소에 강해 반응형 웹 사이트 대응에 유리하다. SVG는 DOM으로 조작이 가능하므로 자바스크립트와 함께 사용하여 인터랙션 디자인(Interaction Design)에도 사용할 수 있다. 웹에서 사용하는 이미지를 크게 나누면 래스터(Raster)와 벡터(Vector)가 있다. 래스터는 점의 집합체로 구성되어 있으며, 대표적인 포맷은 JPEG

2022.07.25