代码之家 › 专栏 › 技术社区 › anlumo

如何捕获SVG解析错误?

qunit svg javascript

anlumo · 技术社区 · 9 年前

我正在尝试编写单元测试(使用 量子单位 )我的代码将SVG路径生成为字符串。其中一个测试应该是这个东西是否实际上是有效的SVG。

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

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

这将失败,并显示相应的错误消息:

错误:属性d=“asdsdsadas”的值无效

但是,它也会返回无效的文档,就像它本来是正常的一样。

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

我试过超越 console.error ,但显然,这个错误源于更深层次,它不在乎JavaScript的欺骗。

有人知道如何正确识别这个错误吗?

1 回复 | 直到 9 年前

Kaiido 9 年前

从字符串中捕获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');
}

<!-- 提供“代码段”对象,请参见http://meta.stackexchange.com/a/242144/134069-->
<脚本src=“http://tjcrowder.github.io/simple-snippets-console/snippet.js“></script>

Chrome控制台告诉你的是,它无法绘制包含在 d 您的属性 <path> .

Per specs ,

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

因此,在您的确切情况下,不会呈现任何内容,但也不会抛出任何错误。

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

但在IMO中,您应该在生成值时直接测试值。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前