Inflearn コミュニティ Q&A

강사님, 안녕하세요.

수업 잘 듣고 있습니다.

강사님께서 svg 태그를 사용하는 두 가지 방식에 대해서 설명해주셨는데요.

1. 처음부터 svg 태그를 사용, 태그에 속성을 사용하는 방식

<svg width="500" height="500"></svg> 

<script>
        const svg = d3.select('svg');
</script>

2. div에 class 속성을 주고,

class 속성을 통해 svg를 append 후, 속성 attribute 하는 방식

<div class="canvas"></div>

<script>
        const svg = d3.select('.canvas')
                        .append('svg')
                        .attr('width', 1000)
                        .attr('height', 1000);
</script>

왜 2번 방식을 많이 쓰는지 궁금합니다.

svg를 추가할 지의 여부 내지는 svg 태그의 속성 등을 동적으로 지정해주기 위함인지요?