크롬에서 SVG 경로 로그 메시지를 구문 분석하는 중 오류가 발생했습니다.

Question

SVG를 통한 자유형 그리기를위한 자바 스크립트에서 간단한 페인팅 도구를 구현하려고합니다. 자유로운 손을 위해 나는 그림을 그리는 동안 폴리 라인을 사용하고 그림이 완성되면 곡선을 부드럽게 만들기 위해 그림을 그리는 것처럼 곡선을 만들려고합니다. 그리고 물론 나는 진짜 또는 심지어 지금까지 시도에 대한 좋은 평활 논리를 고안하지 않았습니다. 제가 현재 사용하고있는 것은 폴리 라인의 4 포인트마다 하나씩 커브를 만드는 것입니다. 이것은 나쁜 접근일지도 모르지만 이것은 내가 시도 할만한 가치가 있다고 생각한 첫 번째 것이다.

<path stroke="black" opacity="1" stroke-width="10" shape-rendering="geometric-precision" fill="none" d="M 1452 559 C 1452 556 1317 518 1308 521 1296 528 1289 537 1281 542 1277 549 1272 559 1267 566 1265 578 1265 585 1263 592 1263 599 1260 606 1258 616 1253 627 1248 639 1244 656"> </path>

그러나 크롬에서이 오류를 Problem parsing d="M 1452 559 C 1452 ... 을 얻고있다하지만 그것은 SVG에있는 모든 렌더링됩니다. 나는 왜 그것이 일어나고 있는지 그리고 크롬에서만인지 알고 싶다.

Answer 1

이것은 크롬의 오류가 아닙니다. 베 지어 곡선에는 시작점 이외의 최소 3 점을 의미하는 2 개의 제어점과 끝점이 필요하며 곡선 시퀀스의 경우 곡선의 시작점이 끝점이되므로 점 수는 3의 배수 여야합니다. 너무 이른.
포인트가 3의 배수가 아닌 경우 크롬에서 오류가 발생하지만 여전히 렌더링됩니다.