SVG <line> 요소를 이용하여 웹페이지에 세로 선을 그려보자

세로선을 그리려면 어떻게해 ?

ChatGPT
SVG를 사용하여 세로선을 그리려면 <line> 요소를 사용하면 됩니다. <line> 요소는 시작점과 끝점의 좌표를 사용하여 선을 그리는 요소입니다.

다음은 SVG <line> 요소를 사용하여 세로선을 그리는 예시입니다:

<svg>
  <line x1="50" y1="0" x2="50" y2="200" stroke="black" stroke-width="2" />
</svg>

위의 코드에서 x1과 x2 속성은 선의 수직 위치를 지정하는 값입니다. y1은 선의 시작점의 수직 위치를 나타내며, y2는 선의 끝점의 수직 위치를 나타냅니다. stroke 속성은 선의 색상을, stroke-width 속성은 선의 두께를 지정합니다.

위의 예시는 세로선을 그리기 위해 x1, x2 값을 동일하게 설정하여 선이 수직으로 그려지도록 했습니다. 시작점의 y1은 0으로 설정하여 맨 위부터 선이 그려지도록 했고, 끝점의 y2는 200으로 설정하여 선의 길이를 조절했습니다.

이렇게 작성된 SVG 코드를 HTML 파일에 추가하면 세로선이 표시됩니다. 필요에 따라 좌표와 스타일 등을 조정하여 원하는 세로선을 그릴 수 있습니다.

추가로 질문이 있거나 도움이 필요하시면 언제든지 물어보세요!





User
선의 시작점과 끝점을 container의 상대위치로 하고 싶어

ChatGPT
SVG에서 선의 시작점과 끝점을 컨테이너의 상대 위치로 설정하려면 JavaScript를 사용하여 동적으로 좌표를 계산해야 합니다.
다음은 JavaScript를 사용하여 선의 시작점과 끝점을 컨테이너의 상대 위치로 설정하는 예시입니다:

html
Copy code

<div id="container" style="position: relative; width: 400px; height: 400px;">
  <svg id="svg" width="100%" height="100%">
    <line id="vertical-line" stroke="black" stroke-width="2" />
  </svg>
</div>

<script>
  // 컨테이너 요소와 SVG 요소, 선 요소를 선택합니다.
  const container = document.getElementById('container');
  const svg = document.getElementById('svg');
  const line = document.getElementById('vertical-line');

  // 컨테이너의 크기를 가져옵니다.
  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;

  // 선의 시작점과 끝점을 컨테이너의 상대 위치로 계산합니다.
  const startX = containerWidth * 0.5; // 시작점 x 좌표
  const startY = containerHeight * 0.2; // 시작점 y 좌표
  const endX = containerWidth * 0.5; // 끝점 x 좌표
  const endY = containerHeight * 0.8; // 끝점 y 좌표

  // 선의 좌표를 설정합니다.
  line.setAttribute('x1', startX);
  line.setAttribute('y1', startY);
  line.setAttribute('x2', endX);
  line.setAttribute('y2', endY);
</script>

위의 코드에서는 <div> 요소를 사용하여 컨테이너를 만들고, 그 안에 <svg> 요소를 추가하여 SVG를 포함하고 있습니다. JavaScript 코드를 사용하여 선의 시작점과 끝점을 컨테이너의 상대 위치로 계산하고, 해당 좌표를 SVG 요소의 속성에 설정합니다.

JavaScript 코드에서는 container 변수를 사용하여 컨테이너 요소를 선택하고, offsetWidth와 offsetHeight를 사용하여 컨테이너의 실제 크기를 가져옵니다. 그리고 시작점과 끝점의 좌표를 컨테이너의 크기를 기반으로 계산하여 SVG 요소의 선에 설정합니다.

이렇게 하면 선의 시작점과 끝점이 컨테이너의 상대 위치로 설정되어 원하는 결과를 얻을 수 있습니다.
만약 추가로 도움이 필요하거나 다른 질문이 있으시면 언제든지 물어보세요!