如何捕获 SVG 解析错误

How to catch an SVG parsing error?

本文关键字：错误 SVG 何捕获      更新时间：2023-09-26

我正在尝试为我的代码编写一个单元测试（使用 qunit），该测试将 SVG 路径生成为字符串。测试之一应该是那个东西是否真的是有效的 SVG。

在 Chrome 浏览器控制台中，只需执行以下操作即可轻松进行测试：

$("<svg xmlns='"http://www.w3.org/2000/svg'"><path d='"asdsdsadas'" /></svg>")

这将失败，并显示相应的错误消息：

错误：属性 d="asdsdsadas"的值无效

但是，它也返回无效文档，就像它本来可以一样。

当我在 qunit 中运行此代码时，错误会打印到浏览器控制台中，但单元测试仍然成功，因为它实际上并不是一个例外。我试图抓住它也没有成功。

我已经尝试覆盖console.error，但显然此错误起源于更深层次，不关心 JavaScript 的技巧。

有人知道如何正确识别此错误吗？

从字符串中捕获 svg 解析错误的正常方法是使用 DOMParser() 对象。

如果确实将无效字符串传递给 parseFromString() 方法，则 DOMParser 将返回错误文档。

var invalidMarkup = "<svg xmlns='"http://www.w3.org/2000/svg'"><path d'"M0,0'" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(invalidMarkup, 'image/svg+xml');
var failed = doc.documentElement.nodeName.indexOf('parsererror')>-1;
if(failed){
  snippet.log('failed to load the doc : '+doc.documentElement.nodeName);
  }
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

但是您在问题中给出的标记是有效的 svg+xml 标记。
解析器不会抱怨它。 

var yourMarkup = "<svg xmlns='"http://www.w3.org/2000/svg'"><path d='"asdsdsadas'" /></svg>";
var oParser = new DOMParser();
var doc = oParser.parseFromString(yourMarkup, 'image/svg+xml');
var failed = doc.documentElement.nodeName.indexOf('parsererror') > -1;
if (failed) {
  snippet.log('failed to load the doc : ' + doc.documentElement.nodeName);
} else {
  snippet.log('success');
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Chrome控制台告诉您的是，它无法绘制<path>的d属性中包含的整个句段。

根据规格，

路径数据中错误处理的一般规则是 SVG 用户 代理应呈现路径（但不包括）路径的"路径"元素 命令包含路径数据规范中的第一个错误。

因此，在您的确切情况下，不会呈现任何内容，但也不会引发任何错误。

以编程方式检测此类错误的唯一方法是获取path.pathSegList.length并检查它是否与您添加到此属性中的段数相对应。

但是 IMO，您应该在生成值时直接测试您的值。

相关文章：