colinmeinke / svg-points

A specification for storing SVG shape data in Javascript, and some handy conversion functions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple coords incorrect for moveTo command

dalisoft opened this issue · comments

Hi @colinmeinke
Thanks for this library, amazing, unreplaceable stuff in points of SVG Data

There i'm explain as i can.
Note: This case very rare, but can be.

import { toPoints } from 'svg-points'

let d = 'M10 10 30 10 L40 10'
let points = toPoints({type:"path", d})

console.log(points)

[
{x: 10, y: 10, moveTo: true},
{x: 40, y: 10}
]
// but should be really these points (see below)
[
{x: 10, y: 10, moveTo: true},
{x: 30, y: 10},
{x: 40, y: 10}
]

If any questions, ask.
Thanks again for project

Ah I see, good catch! It should really be this right?

[
  { x: 10, y: 10, moveTo: true },
  { x: 30, y: 10, moveTo: true },
  { x: 40, y: 10 }
]

No, second moveTo should be lineTo as browser renders like lineTo insteadof moveTo

Ah yeah, that seems to be the case... but I can't find any mention of that in the spec?

Got it.

If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto.

https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

@colinmeinke
Try morph from M 110 110 m -110 0 a 110 110 0 0 1 220 0 a 110 110 0 0 1 -220 0 z M 110 110 m -55 0 a 55 55 0 0 1 110 0 a 55 55 0 0 1 -110 0 z M 69.4 201.3873076 A 100 100 0 0 0 135.210724 206.7699302 L 103.0703536 174.6295598 A 65 65 0 0 1 69.4 160.7606146 L 69.4 201.3873076 Z M 74.0879504 16.6708797 A 100 100 0 0 0 23.7466522 59.4 L 69.2 59.4 A 65 65 0 0 1 102.8153605 45.3982898 L 74.0879504 16.6708797 Z M 201.3873076 150.6 A 100 100 0 0 0 206.7699302 84.789276 L 174.6295598 116.9296464 A 65 65 0 0 1 160.7606146 150.6 L 201.3873076 150.6 Z M 150.6 18.6126924 A 100 100 0 0 0 84.789276 13.2300698 L 116.9296464 45.3704402 A 65 65 0 0 1 150.6 59.2393854 L 150.6 18.6126924 Z M 18.6126924 69.4 A 100 100 0 0 0 13.2300698 135.210724 L 45.3704402 103.0703536 A 65 65 0 0 1 59.2393854 69.4 L 18.6126924 69.4 Z M 16.6708797 145.9120496 A 100 100 0 0 0 59.4 196.2533478 L 59.4 150.8 A 65 65 0 0 1 45.3982898 117.1846395 L 16.6708797 145.9120496 Z M 145.9120496 203.3291203 A 100 100 0 0 0 196.2533478 160.6 L 150.8 160.6 A 65 65 0 0 1 117.1846395 174.6017102 L 145.9120496 203.3291203 Z M 203.3291203 74.0879504 A 100 100 0 0 0 160.6 23.7466522 L 160.6 69.2 A 65 65 0 0 1 174.6017102 102.8153605 L 203.3291203 74.0879504 Z
to
M 90 90 m -90 0 a 90 90 0 0 1 180 0 a 90 90 0 0 1 -180 0 z M 115 65 m -10 0 a 10 10 0 0 1 20 0 a 10 10 0 0 1 -20 0 z M 125.3553391 125.3553391 A 50 50 0 0 1 54.6446609 125.3553391 M 55 70 75 70 (BUG comes from this path) and see the result

hi @colinmeinke

You should update prevPoint Object value inside 2nd for...loop
I believe you should add this to line 245, right after switch..case

prevPoint = i === 0 ? null : points[ points.length - 1 ]

Working as expected now @dalisoft?

I cant test now, but i sure, you smart for these things, thank for you for fixing this issue