js와 CSS를 사용하여 두 점 사이에 선을 그리는 방법

Question

이것은 jQuery를 사용하여 추가된 2개의 점과 점을 연결하는 선이 있는 간단한 HTML 페이지입니다.

결과적으로 선에는 연결점이 없지만 어떤 이유로 선이 오프셋됩니다.

으아악 으아악 으아악

선과 2개의 점이 position:absolute;，因此 top 和 left 相对于容器。p>

margin 또한 3개를 모두 0으로 설정하세요

선의 상단이 point1의 상단으로 설정되어 있는데 선이 point1보다 위에 있습니다.

이게 왜요?

Answer 1

선은 중심을 중심으로 회전하며 원점을 기준으로 회전하기를 원합니다. 이 경우 원점은 左上角，也可能是所有其他点。所以需要添加 transform-origin: top left

입니다.

으아악 으아악 으아악