Проверьте правильность строки пути SVG (свойство d)

Question

Существует ли тест javascript / regex для инструкций SVG-пути?

Я динамически генерирую инструкции пути (свойство d элемента <path/>) и хотел бы проверить правильность строки перед отображением пути.

Answer 1

Регулярное выражение ниже обеспечит некоторый уровень уверенности.Если строка не проходит этот тест, она не является допустимым значением d, однако я не могу гарантировать, что все значения, которые проходят этот тест, являются действительными значениями d:

const sValid = `
  M 213.1,6.7
  c -32.4-14.4-73.7,0-88.1,30.6
  C 110.6,4.9,67.5-9.5,36.9,6.7
  C 2.8,22.9-13.4,62.4,13.5,110.9
  C 33.3,145.1,67.5,170.3,125,217
  c 59.3-46.7,93.5-71.9,111.5-106.1
  C 263.4,64.2,247.2,22.9,213.1,6.7
  z
`;

const sOtherValid = 'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9';

// true means it is definitely invalid
// false *doesn't* mean it's definitely valid
function isInvalidD(s) {
   const reEverythingAllowed = /[MmZzLlHhVvCcSsQqTtAa0-9-,.\s]/g;

   const bContainsIllegalCharacter = !!s.replace(reEverythingAllowed,'').length;
   const bContainsAdjacentLetters = /[a-zA-Z][a-zA-Z]/.test(s);
   const bInvalidStart = /^[0-9-,.]/.test(s);
   const bInvalidEnd = /.*[-,.]$/.test(s.trim());

   return bContainsIllegalCharacter || bContainsAdjacentLetters || bInvalidStart || bInvalidEnd;
}


console.log(isInvalidD('bro'))

console.log(isInvalidD(sOtherValid))

console.log(isInvalidD('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.'))

console.log(isInvalidD('213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9'))

console.log(isInvalidD('MM213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9'))

console.log(isInvalidD(sValid))

console.log(isInvalidD('K213.1,6.7c-32.4-14.4-73.7,0-88'))

Приведенный выше тест основан на разделе спецификации W3 SVG 9.3.9 .

Если вам нужен более полный валидатор, вы можетеиспользуйте http://validator.nu. Хотя этот сервис не является регулярным выражением, он может проверять весь SVG, а не только значение d.Это также зависит от того, с какой спецификацией SVG вы имеете дело.Я предполагаю, что последние спецификации 1.2.Проверьте этот ответ для получения дополнительной информации.