Question

我正在尝试将SVG路径转换为Node中的点列表。我正在使用elementtree来解析SVG文件。

d是路径的定义，getPos只是将“x，y”变成带有x和y的对象，doLine只是将坐标添加到列表中。

  d = path.get('d')

  words = d.split(' ')

  oldPos = undefined
  startPos = undefined

  for i in [0..words.length]
    word = words[i]

    if word == 'm' or word == 'M'
      oldPos = getPos(words[i + 1])
      startPos = getPos(words[i + 1])
      i += 1

    else if word == 'l' or word == 'L'
      console.log('done nothing...')

    else if word == 'z' or word == 'Z'
      doLine(oldPos, startPos)

    else if word
      pos = getPos(word)
      doLine(oldPos, pos)
      oldPos = pos

目前，这似乎无法正常工作。

我知道我的路径永远不会有曲线，所以我不需要担心。

我不确定SVG标准，所以如果有人能帮助我，那将是非常感谢。

Answer 1

SVG包含自己的路径段parser，所以为什么重新发明轮子。尝试建立在此基础上：http://jsfiddle.net/longsonr/skWH5/

在gecko中，路径从开头开始解析，读取一个非空白字符，然后使用后面预期参数数量的表来读取这么多数字（可能最多有一个逗号分隔）他们）。这一直持续到字符串结束。

Answer 2

我对coffeescript并不熟悉，但您的代码似乎存在一些问题。

最重要的是，似乎你的i + = 1只发生在word =='m或'M'的情况下，所以我认为你大部分时间都会陷入循环。
其次，如果word =='l'或'L'似乎没有做任何事情，我会想要添加一个节点。如果你没有曲线，那么你肯定有线条，除非你只是使用水平线或垂直线。您还需要更新当前位置，这取决于它是相对命令还是绝对命令。
最后，您可能不应该使用空格分割，因为d="M90,20L100,30L110,20z"是有效路径。你说你知道路径中没有曲线，所以也许你也知道你的所有路径都会用空格分割。在这种情况下，这是公平的，但值得记住。

希望有所帮助。

将SVG路径转换为线段

2 个答案: