Блог

Я использую библиотеку макетов, которая создает для меня некоторые пути, которые я пытаюсь преобразовать в пути SVG. Большинство путей кажутся нормальными, но некоторые выдают ошибки, и я не смог выяснить, почему.

Пример:

 <path d=" M0 0 C  0 90,  56 90,  56 279,  163 279, 163 309 z"></path>
  

У меня есть JSFiddle, который вы можете запустить и увидеть ошибку в консоли здесь.

Ошибка, которую я получаю, это:

Ошибка: атрибут d: ожидаемое число, «… 63 279, 163 309 z».

Итак, вам нужно убедиться, что данные пути соответствуют стандарту SVG:https://www.w3.org/TR/SVG11/paths.html#DAttribute

Если вы используете запятую для разделения значений, то ее следует использовать последовательно:

 "M0,0 C0,90 56,90 56,279 163,279 163,309 z"
  

Если не используется запятая:

 "M 0 0 C 0 90 56 90 56 279 163 279 163 309 z"
  

ОБНОВЛЕНИЕ: ccprog верен, если он комментирует, что согласованность не является обязательным требованием. Так что это скорее удобство / практика для обеспечения согласованности.

Теперь проблема с ошибкой, которую вы наблюдаете в консоли, связана с правилом, как буквы пути могут быть удалены:

Буква команды может быть удалена при последующих командах, если одна и та же команда используется несколько раз подряд (например, вы можете убрать вторую «L» в «M 100 200 L 200 100 L -100 -200» и вместо этого использовать «M 100 200 L 200 100 -100 -200»).

В основном в вашем случае браузер считает, что вы последовательно используете кубические кривые Безье:

«M0,0 C0,90 56,90 56,279 C163, 279 163,309 z»

Таким образом, он интерпретирует «z» как последнюю координату, которую он ожидает для кубической кривой Безье.

Вы можете устранить ошибку, добавив недостающую точку или явно используя другую команду.