[JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기
2022. 7. 26. 00:54ㆍProgram/JavaScript
199_자바스크립트에서 SVG 요소 스타일 변경하기
[적용]
- 유저 조작에 반응하는 그래픽을 넣고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 요소.setAttribute(속성, 값) | 요소의 속성 설정 | 없음 |
[내용]
SVG 요소는 document.querySelector() 등을 사용한 참조와
setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다.
SVG는 HTML의 DOM과 같은 방식으로 사용할 수 있다.
HTML index.html
<body>
<svg viewBox="0 0 200 200" width="200" height="200">
<circle id="myCircle" cx="100" cy="100" stroke-width="2" stroke="#FFFFFF" />
</svg>
</body>JavaScript main.js
const circle1 = document.querySelector('#myCircle');
circle1.setAttribute('r', '100'); // 반직름 지정
circle1.setAttribute('fill', '#FFFFBD'); // 색상 지정
circle1.setAttribute('fill-opacity', '0.5'); // 색상 투명도 지정속성값을 변경하는 setAttribute()의 첫 번째 인수는 속성명을,
두 번째 인수는 변경하고 싶은 값을 전달한다.
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기 (0) | 2022.07.26 |
|---|---|
| [JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소를 동적으로 추가하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 사용하기 (0) | 2022.07.25 |
| [JavaScript] 자바스크립트에서 카메라 기능 사용하기 (0) | 2022.07.25 |