Question

是否有针对SVG路径说明的javascript / regex测试？

我正在动态生成路径指令（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 spec section 9.3.9。

如果您想要更全面的验证器，可以使用http://validator.nu。尽管该服务不是正则表达式，但它不仅可以验证d值，还可以验证整个SVG。这也取决于您要处理的SVG规范。我认为最近的1.2规格。检查this answer了解更多信息。

测试SVG路径（“ d”属性）字符串是否有效

1 个答案: